From 0b4a10b088e7047102d8e4deb5eee4f6936af9e5 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Tue, 19 Sep 2023 22:29:49 +0400
Subject: [PATCH] Updates

---
 404.html                                      |   4 +-
 404/index.html                                |   9 +
 .../_buildManifest.js                         |   2 +-
 .../_ssgManifest.js                           |   0
 _next/static/chunks/1300-7220bd7f6a9c82f6.js  |   1 +
 _next/static/chunks/1300-a1599e086a440f9c.js  |   1 -
 _next/static/chunks/main-6b495e28bfbaa813.js  |   1 -
 _next/static/chunks/main-da49d387d19ca122.js  |   1 +
 .../colors-generator-55b397ea41fc6dea.js      |   1 -
 .../colors-generator-7af0078c6aa3ab46.js      |   1 +
 ...b.js => default-props-435f082c9754bd64.js} |   2 +-
 .../mantine-provider-816e166cf579a4c0.js      |   1 +
 .../mantine-provider-dbf707fe736eae0f.js      |  17 -
 about.html => about/index.html                |   4 +-
 app-shell.html => app-shell/index.html        |   2 +-
 changelog/{7-0-0.html => 7-0-0/index.html}    | 234 ++++-----
 .../index.html}                               |   4 +-
 colors-generator.html                         |  44 --
 colors-generator/index.html                   |  44 ++
 combobox.html => combobox/index.html          |   2 +-
 contribute.html => contribute/index.html      |   4 +-
 core/{accordion.html => accordion/index.html} |  14 +-
 .../index.html}                               |  32 +-
 core/affix.html                               |  34 --
 core/affix/index.html                         |  34 ++
 core/{alert.html => alert/index.html}         |   6 +-
 core/{anchor.html => anchor/index.html}       |  10 +-
 core/{app-shell.html => app-shell/index.html} |  26 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |  14 +-
 core/{avatar.html => avatar/index.html}       |  14 +-
 .../index.html}                               |   6 +-
 core/{badge.html => badge/index.html}         |  10 +-
 .../index.html}                               |   4 +-
 core/box.html                                 |  22 -
 core/box/index.html                           |  22 +
 core/breadcrumbs.html                         |  28 --
 core/breadcrumbs/index.html                   |  28 ++
 core/{burger.html => burger/index.html}       |   6 +-
 core/{button.html => button/index.html}       |  34 +-
 core/{card.html => card/index.html}           |  12 +-
 core/{center.html => center/index.html}       |   6 +-
 core/{checkbox.html => checkbox/index.html}   |   4 +-
 core/{chip.html => chip/index.html}           |   4 +-
 core/close-button.html                        |  28 --
 core/close-button/index.html                  |  28 ++
 core/{code.html => code/index.html}           |   6 +-
 core/{collapse.html => collapse/index.html}   |   4 +-
 .../index.html}                               |  10 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   8 +-
 core/{combobox.html => combobox/index.html}   |  24 +-
 core/{container.html => container/index.html} |  10 +-
 .../index.html}                               |   6 +-
 core/dialog.html                              |  51 --
 core/dialog/index.html                        |  51 ++
 core/{divider.html => divider/index.html}     |   4 +-
 core/{drawer.html => drawer/index.html}       |  14 +-
 core/{fieldset.html => fieldset/index.html}   |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 core/{flex.html => flex/index.html}           |   6 +-
 .../index.html}                               |   8 +-
 core/{grid.html => grid/index.html}           |   8 +-
 core/{group.html => group/index.html}         |   8 +-
 core/{highlight.html => highlight/index.html} |   8 +-
 .../index.html}                               |   4 +-
 core/{image.html => image/index.html}         |  10 +-
 core/{indicator.html => indicator/index.html} |   4 +-
 core/{input.html => input/index.html}         |  32 +-
 .../index.html}                               |  10 +-
 core/kbd.html                                 |  15 -
 core/kbd/index.html                           |  15 +
 core/{list.html => list/index.html}           |   4 +-
 core/{loader.html => loader/index.html}       |  12 +-
 .../index.html}                               |   6 +-
 core/{mark.html => mark/index.html}           |   4 +-
 core/{menu.html => menu/index.html}           |  10 +-
 core/{modal.html => modal/index.html}         |  16 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |   8 +-
 core/{nav-link.html => nav-link/index.html}   |   8 +-
 .../index.html}                               |   8 +-
 .../index.html}                               |   8 +-
 core/{overlay.html => overlay/index.html}     |   6 +-
 .../index.html}                               |   8 +-
 core/{paper.html => paper/index.html}         |   6 +-
 .../index.html}                               |  10 +-
 core/{pill.html => pill/index.html}           |   6 +-
 .../index.html}                               |  10 +-
 core/{pin-input.html => pin-input/index.html} |   6 +-
 core/{popover.html => popover/index.html}     |   8 +-
 core/portal.html                              |  67 ---
 core/portal/index.html                        |  67 +++
 core/{progress.html => progress/index.html}   |   6 +-
 core/{radio.html => radio/index.html}         |   4 +-
 core/{rating.html => rating/index.html}       |   4 +-
 .../index.html}                               |  10 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 core/{select.html => select/index.html}       |  16 +-
 .../index.html}                               |   8 +-
 core/{skeleton.html => skeleton/index.html}   |   4 +-
 core/{slider.html => slider/index.html}       |  12 +-
 core/{space.html => space/index.html}         |   4 +-
 core/{spoiler.html => spoiler/index.html}     |   4 +-
 core/{stack.html => stack/index.html}         |   8 +-
 core/{stepper.html => stepper/index.html}     |   8 +-
 core/{switch.html => switch/index.html}       |   6 +-
 core/{table.html => table/index.html}         |   6 +-
 core/{tabs.html => tabs/index.html}           |   8 +-
 .../index.html}                               |  18 +-
 .../index.html}                               |   8 +-
 core/{text.html => text/index.html}           |  14 +-
 core/{textarea.html => textarea/index.html}   |   8 +-
 .../index.html}                               |   6 +-
 core/{timeline.html => timeline/index.html}   |   4 +-
 core/{title.html => title/index.html}         |  10 +-
 core/{tooltip.html => tooltip/index.html}     |   8 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 core/visually-hidden.html                     |  19 -
 core/visually-hidden/index.html               |  19 +
 dates/{calendar.html => calendar/index.html}  |  18 +-
 .../index.html}                               |  12 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |  44 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 form/{errors.html => errors/index.html}       |   6 +-
 form/{nested.html => nested/index.html}       |   6 +-
 form/{recipes.html => recipes/index.html}     |   4 +-
 form/{status.html => status/index.html}       |   6 +-
 form/{use-form.html => use-form/index.html}   |  14 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 form/{values.html => values/index.html}       |   6 +-
 .../index.html                                |  32 +-
 guides/{6x-to-7x.html => 6x-to-7x/index.html} |  42 +-
 guides/{gatsby.html => gatsby/index.html}     |   8 +-
 guides/{icons.html => icons/index.html}       |   8 +-
 .../index.html}                               |   6 +-
 guides/{jest.html => jest/index.html}         |  10 +-
 guides/{next.html => next/index.html}         |  20 +-
 .../index.html}                               |  10 +-
 guides/{redwood.html => redwood/index.html}   |  10 +-
 guides/{remix.html => remix/index.html}       |  10 +-
 .../{storybook.html => storybook/index.html}  |   6 +-
 .../index.html}                               |  12 +-
 guides/{vite.html => vite/index.html}         |  10 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   6 +-
 hooks/use-did-update.html                     |  14 -
 hooks/use-did-update/index.html               |  14 +
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   4 +-
 hooks/use-force-update.html                   |  22 -
 hooks/use-force-update/index.html             |  22 +
 .../index.html}                               |   4 +-
 hooks/{use-hash.html => use-hash/index.html}  |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../{use-hover.html => use-hover/index.html}  |   4 +-
 hooks/use-id.html                             |  29 --
 hooks/use-id/index.html                       |  29 ++
 hooks/{use-idle.html => use-idle/index.html}  |   4 +-
 hooks/use-input-state.html                    |  48 --
 hooks/use-input-state/index.html              |  48 ++
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 hooks/use-isomorphic-effect.html              |  16 -
 hooks/use-isomorphic-effect/index.html        |  16 +
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   8 +-
 .../{use-mouse.html => use-mouse/index.html}  |   4 +-
 hooks/{use-move.html => use-move/index.html}  |   4 +-
 .../index.html}                               |   4 +-
 hooks/{use-os.html => use-os/index.html}      |   4 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   4 +-
 .../{use-queue.html => use-queue/index.html}  |   6 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   6 +-
 .../index.html}                               |   4 +-
 hooks/use-set-state.html                      |  23 -
 hooks/use-set-state/index.html                |  23 +
 hooks/use-shallow-effect.html                 |  29 --
 hooks/use-shallow-effect/index.html           |  29 ++
 hooks/use-text-selection.html                 |  20 -
 hooks/use-text-selection/index.html           |  20 +
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 hooks/use-uncontrolled.html                   |  53 --
 hooks/use-uncontrolled/index.html             |  53 ++
 .../index.html}                               |   4 +-
 hooks/use-viewport-size.html                  |  19 -
 hooks/use-viewport-size/index.html            |  19 +
 .../index.html}                               |   4 +-
 .../index.html}                               |   4 +-
 index.html                                    |   6 +-
 others/{carousel.html => carousel/index.html} |   8 +-
 .../index.html}                               |   4 +-
 others/{dropzone.html => dropzone/index.html} |   6 +-
 others/{modals.html => modals/index.html}     |   6 +-
 .../index.html}                               |  14 +-
 .../{nprogress.html => nprogress/index.html}  |   6 +-
 .../{spotlight.html => spotlight/index.html}  |  10 +-
 others/{tiptap.html => tiptap/index.html}     |  12 +-
 overview.html => overview/index.html          |  66 +--
 sitemap.xml                                   | 455 +++++++++---------
 .../index.html}                               |   6 +-
 .../index.html}                               |  14 +-
 .../index.html}                               |  16 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |  24 +-
 .../index.html}                               |  14 +-
 .../index.html}                               |  10 +-
 .../index.html}                               |   8 +-
 styles/{rem.html => rem/index.html}           |  12 +-
 .../index.html}                               |  18 +-
 styles/{rtl.html => rtl/index.html}           |   6 +-
 .../index.html}                               |  10 +-
 styles/{style.html => style/index.html}       |  12 +-
 .../index.html}                               |  30 +-
 .../index.html}                               |  16 +-
 styles/{unstyled.html => unstyled/index.html} |  10 +-
 .../index.html}                               |  24 +-
 .../index.html}                               |  22 +-
 .../index.html                                |   6 +-
 .../index.html}                               |  20 +-
 theming/{colors.html => colors/index.html}    |  22 +-
 .../index.html}                               |   8 +-
 .../index.html}                               |   4 +-
 .../index.html}                               |  60 +--
 .../index.html}                               |  28 +-
 .../index.html}                               |  16 +-
 260 files changed, 1914 insertions(+), 1950 deletions(-)
 create mode 100644 404/index.html
 rename _next/static/{LJ8UVT2kYhT20r4LyREri => 1QUz3aLATlGHLVg4CdVbm}/_buildManifest.js (98%)
 rename _next/static/{LJ8UVT2kYhT20r4LyREri => 1QUz3aLATlGHLVg4CdVbm}/_ssgManifest.js (100%)
 create mode 100644 _next/static/chunks/1300-7220bd7f6a9c82f6.js
 delete mode 100644 _next/static/chunks/1300-a1599e086a440f9c.js
 delete mode 100644 _next/static/chunks/main-6b495e28bfbaa813.js
 create mode 100644 _next/static/chunks/main-da49d387d19ca122.js
 delete mode 100644 _next/static/chunks/pages/colors-generator-55b397ea41fc6dea.js
 create mode 100644 _next/static/chunks/pages/colors-generator-7af0078c6aa3ab46.js
 rename _next/static/chunks/pages/theming/{default-props-ca4da7cae68f8fdb.js => default-props-435f082c9754bd64.js} (62%)
 create mode 100644 _next/static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js
 delete mode 100644 _next/static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js
 rename about.html => about/index.html (86%)
 rename app-shell.html => app-shell/index.html (94%)
 rename changelog/{7-0-0.html => 7-0-0/index.html} (87%)
 rename changelog/{previous-versions.html => previous-versions/index.html} (60%)
 delete mode 100644 colors-generator.html
 create mode 100644 colors-generator/index.html
 rename combobox.html => combobox/index.html (63%)
 rename contribute.html => contribute/index.html (75%)
 rename core/{accordion.html => accordion/index.html} (82%)
 rename core/{action-icon.html => action-icon/index.html} (78%)
 delete mode 100644 core/affix.html
 create mode 100644 core/affix/index.html
 rename core/{alert.html => alert/index.html} (60%)
 rename core/{anchor.html => anchor/index.html} (56%)
 rename core/{app-shell.html => app-shell/index.html} (66%)
 rename core/{aspect-ratio.html => aspect-ratio/index.html} (53%)
 rename core/{autocomplete.html => autocomplete/index.html} (75%)
 rename core/{avatar.html => avatar/index.html} (71%)
 rename core/{background-image.html => background-image/index.html} (50%)
 rename core/{badge.html => badge/index.html} (68%)
 rename core/{blockquote.html => blockquote/index.html} (52%)
 delete mode 100644 core/box.html
 create mode 100644 core/box/index.html
 delete mode 100644 core/breadcrumbs.html
 create mode 100644 core/breadcrumbs/index.html
 rename core/{burger.html => burger/index.html} (50%)
 rename core/{button.html => button/index.html} (81%)
 rename core/{card.html => card/index.html} (66%)
 rename core/{center.html => center/index.html} (52%)
 rename core/{checkbox.html => checkbox/index.html} (72%)
 rename core/{chip.html => chip/index.html} (65%)
 delete mode 100644 core/close-button.html
 create mode 100644 core/close-button/index.html
 rename core/{code.html => code/index.html} (52%)
 rename core/{collapse.html => collapse/index.html} (54%)
 rename core/{color-input.html => color-input/index.html} (74%)
 rename core/{color-picker.html => color-picker/index.html} (76%)
 rename core/{color-swatch.html => color-swatch/index.html} (56%)
 rename core/{combobox.html => combobox/index.html} (82%)
 rename core/{container.html => container/index.html} (58%)
 rename core/{copy-button.html => copy-button/index.html} (52%)
 delete mode 100644 core/dialog.html
 create mode 100644 core/dialog/index.html
 rename core/{divider.html => divider/index.html} (59%)
 rename core/{drawer.html => drawer/index.html} (70%)
 rename core/{fieldset.html => fieldset/index.html} (52%)
 rename core/{file-button.html => file-button/index.html} (56%)
 rename core/{file-input.html => file-input/index.html} (69%)
 rename core/{flex.html => flex/index.html} (57%)
 rename core/{focus-trap.html => focus-trap/index.html} (54%)
 rename core/{grid.html => grid/index.html} (73%)
 rename core/{group.html => group/index.html} (58%)
 rename core/{highlight.html => highlight/index.html} (59%)
 rename core/{hover-card.html => hover-card/index.html} (61%)
 rename core/{image.html => image/index.html} (56%)
 rename core/{indicator.html => indicator/index.html} (63%)
 rename core/{input.html => input/index.html} (80%)
 rename core/{json-input.html => json-input/index.html} (64%)
 delete mode 100644 core/kbd.html
 create mode 100644 core/kbd/index.html
 rename core/{list.html => list/index.html} (60%)
 rename core/{loader.html => loader/index.html} (62%)
 rename core/{loading-overlay.html => loading-overlay/index.html} (60%)
 rename core/{mark.html => mark/index.html} (51%)
 rename core/{menu.html => menu/index.html} (71%)
 rename core/{modal.html => modal/index.html} (76%)
 rename core/{multi-select.html => multi-select/index.html} (82%)
 rename core/{native-select.html => native-select/index.html} (73%)
 rename core/{nav-link.html => nav-link/index.html} (68%)
 rename core/{notification.html => notification/index.html} (63%)
 rename core/{number-input.html => number-input/index.html} (80%)
 rename core/{overlay.html => overlay/index.html} (58%)
 rename core/{pagination.html => pagination/index.html} (76%)
 rename core/{paper.html => paper/index.html} (51%)
 rename core/{password-input.html => password-input/index.html} (72%)
 rename core/{pill.html => pill/index.html} (59%)
 rename core/{pills-input.html => pills-input/index.html} (62%)
 rename core/{pin-input.html => pin-input/index.html} (60%)
 rename core/{popover.html => popover/index.html} (75%)
 delete mode 100644 core/portal.html
 create mode 100644 core/portal/index.html
 rename core/{progress.html => progress/index.html} (63%)
 rename core/{radio.html => radio/index.html} (65%)
 rename core/{rating.html => rating/index.html} (74%)
 rename core/{ring-progress.html => ring-progress/index.html} (64%)
 rename core/{scroll-area.html => scroll-area/index.html} (73%)
 rename core/{segmented-control.html => segmented-control/index.html} (73%)
 rename core/{select.html => select/index.html} (81%)
 rename core/{simple-grid.html => simple-grid/index.html} (54%)
 rename core/{skeleton.html => skeleton/index.html} (51%)
 rename core/{slider.html => slider/index.html} (78%)
 rename core/{space.html => space/index.html} (55%)
 rename core/{spoiler.html => spoiler/index.html} (52%)
 rename core/{stack.html => stack/index.html} (51%)
 rename core/{stepper.html => stepper/index.html} (82%)
 rename core/{switch.html => switch/index.html} (72%)
 rename core/{table.html => table/index.html} (68%)
 rename core/{tabs.html => tabs/index.html} (80%)
 rename core/{tags-input.html => tags-input/index.html} (80%)
 rename core/{text-input.html => text-input/index.html} (66%)
 rename core/{text.html => text/index.html} (69%)
 rename core/{textarea.html => textarea/index.html} (64%)
 rename core/{theme-icon.html => theme-icon/index.html} (63%)
 rename core/{timeline.html => timeline/index.html} (67%)
 rename core/{title.html => title/index.html} (51%)
 rename core/{tooltip.html => tooltip/index.html} (77%)
 rename core/{transition.html => transition/index.html} (53%)
 rename core/{typography-styles-provider.html => typography-styles-provider/index.html} (53%)
 rename core/{unstyled-button.html => unstyled-button/index.html} (51%)
 delete mode 100644 core/visually-hidden.html
 create mode 100644 core/visually-hidden/index.html
 rename dates/{calendar.html => calendar/index.html} (76%)
 rename dates/{date-input.html => date-input/index.html} (74%)
 rename dates/{date-picker-input.html => date-picker-input/index.html} (76%)
 rename dates/{date-picker.html => date-picker/index.html} (92%)
 rename dates/{date-time-picker.html => date-time-picker/index.html} (73%)
 rename dates/{dates-provider.html => dates-provider/index.html} (62%)
 rename dates/{getting-started.html => getting-started/index.html} (61%)
 rename dates/{month-picker-input.html => month-picker-input/index.html} (76%)
 rename dates/{month-picker.html => month-picker/index.html} (87%)
 rename dates/{time-input.html => time-input/index.html} (70%)
 rename dates/{year-picker-input.html => year-picker-input/index.html} (76%)
 rename dates/{year-picker.html => year-picker/index.html} (85%)
 rename form/{create-form-context.html => create-form-context/index.html} (61%)
 rename form/{errors.html => errors/index.html} (66%)
 rename form/{nested.html => nested/index.html} (71%)
 rename form/{recipes.html => recipes/index.html} (77%)
 rename form/{status.html => status/index.html} (65%)
 rename form/{use-form.html => use-form/index.html} (72%)
 rename form/{validation.html => validation/index.html} (88%)
 rename form/{validators.html => validators/index.html} (74%)
 rename form/{values.html => values/index.html} (76%)
 rename getting-started.html => getting-started/index.html (83%)
 rename guides/{6x-to-7x.html => 6x-to-7x/index.html} (72%)
 rename guides/{gatsby.html => gatsby/index.html} (72%)
 rename guides/{icons.html => icons/index.html} (65%)
 rename guides/{javascript.html => javascript/index.html} (57%)
 rename guides/{jest.html => jest/index.html} (62%)
 rename guides/{next.html => next/index.html} (68%)
 rename guides/{polymorphic.html => polymorphic/index.html} (73%)
 rename guides/{redwood.html => redwood/index.html} (68%)
 rename guides/{remix.html => remix/index.html} (67%)
 rename guides/{storybook.html => storybook/index.html} (65%)
 rename guides/{typescript.html => typescript/index.html} (68%)
 rename guides/{vite.html => vite/index.html} (66%)
 rename hooks/{use-click-outside.html => use-click-outside/index.html} (59%)
 rename hooks/{use-clipboard.html => use-clipboard/index.html} (52%)
 rename hooks/{use-color-scheme.html => use-color-scheme/index.html} (51%)
 rename hooks/{use-counter.html => use-counter/index.html} (53%)
 rename hooks/{use-debounced-state.html => use-debounced-state/index.html} (56%)
 rename hooks/{use-debounced-value.html => use-debounced-value/index.html} (60%)
 delete mode 100644 hooks/use-did-update.html
 create mode 100644 hooks/use-did-update/index.html
 rename hooks/{use-disclosure.html => use-disclosure/index.html} (50%)
 rename hooks/{use-document-title.html => use-document-title/index.html} (50%)
 rename hooks/{use-document-visibility.html => use-document-visibility/index.html} (50%)
 rename hooks/{use-element-size.html => use-element-size/index.html} (52%)
 rename hooks/{use-event-listener.html => use-event-listener/index.html} (51%)
 rename hooks/{use-eye-dropper.html => use-eye-dropper/index.html} (52%)
 rename hooks/{use-favicon.html => use-favicon/index.html} (51%)
 rename hooks/{use-focus-return.html => use-focus-return/index.html} (53%)
 rename hooks/{use-focus-trap.html => use-focus-trap/index.html} (54%)
 rename hooks/{use-focus-within.html => use-focus-within/index.html} (52%)
 delete mode 100644 hooks/use-force-update.html
 create mode 100644 hooks/use-force-update/index.html
 rename hooks/{use-fullscreen.html => use-fullscreen/index.html} (56%)
 rename hooks/{use-hash.html => use-hash/index.html} (51%)
 rename hooks/{use-headroom.html => use-headroom/index.html} (51%)
 rename hooks/{use-hotkeys.html => use-hotkeys/index.html} (56%)
 rename hooks/{use-hover.html => use-hover/index.html} (50%)
 delete mode 100644 hooks/use-id.html
 create mode 100644 hooks/use-id/index.html
 rename hooks/{use-idle.html => use-idle/index.html} (57%)
 delete mode 100644 hooks/use-input-state.html
 create mode 100644 hooks/use-input-state/index.html
 rename hooks/{use-intersection.html => use-intersection/index.html} (55%)
 rename hooks/{use-interval.html => use-interval/index.html} (53%)
 delete mode 100644 hooks/use-isomorphic-effect.html
 create mode 100644 hooks/use-isomorphic-effect/index.html
 rename hooks/{use-list-state.html => use-list-state/index.html} (60%)
 rename hooks/{use-local-storage.html => use-local-storage/index.html} (58%)
 rename hooks/{use-logger.html => use-logger/index.html} (50%)
 rename hooks/{use-media-query.html => use-media-query/index.html} (52%)
 rename hooks/{use-merged-ref.html => use-merged-ref/index.html} (51%)
 rename hooks/{use-mouse.html => use-mouse/index.html} (56%)
 rename hooks/{use-move.html => use-move/index.html} (66%)
 rename hooks/{use-network.html => use-network/index.html} (54%)
 rename hooks/{use-os.html => use-os/index.html} (51%)
 rename hooks/{use-page-leave.html => use-page-leave/index.html} (50%)
 rename hooks/{use-pagination.html => use-pagination/index.html} (67%)
 rename hooks/{use-previous.html => use-previous/index.html} (50%)
 rename hooks/{use-queue.html => use-queue/index.html} (53%)
 rename hooks/{use-reduced-motion.html => use-reduced-motion/index.html} (51%)
 rename hooks/{use-resize-observer.html => use-resize-observer/index.html} (52%)
 rename hooks/{use-scroll-into-view.html => use-scroll-into-view/index.html} (63%)
 delete mode 100644 hooks/use-set-state.html
 create mode 100644 hooks/use-set-state/index.html
 delete mode 100644 hooks/use-shallow-effect.html
 create mode 100644 hooks/use-shallow-effect/index.html
 delete mode 100644 hooks/use-text-selection.html
 create mode 100644 hooks/use-text-selection/index.html
 rename hooks/{use-timeout.html => use-timeout/index.html} (53%)
 rename hooks/{use-toggle.html => use-toggle/index.html} (54%)
 delete mode 100644 hooks/use-uncontrolled.html
 create mode 100644 hooks/use-uncontrolled/index.html
 rename hooks/{use-validated-state.html => use-validated-state/index.html} (53%)
 delete mode 100644 hooks/use-viewport-size.html
 create mode 100644 hooks/use-viewport-size/index.html
 rename hooks/{use-window-event.html => use-window-event/index.html} (50%)
 rename hooks/{use-window-scroll.html => use-window-scroll/index.html} (50%)
 rename others/{carousel.html => carousel/index.html} (88%)
 rename others/{code-highlight.html => code-highlight/index.html} (77%)
 rename others/{dropzone.html => dropzone/index.html} (80%)
 rename others/{modals.html => modals/index.html} (73%)
 rename others/{notifications.html => notifications/index.html} (79%)
 rename others/{nprogress.html => nprogress/index.html} (60%)
 rename others/{spotlight.html => spotlight/index.html} (77%)
 rename others/{tiptap.html => tiptap/index.html} (87%)
 rename overview.html => overview/index.html (86%)
 rename styles/{color-functions.html => color-functions/index.html} (64%)
 rename styles/{css-files-list.html => css-files-list/index.html} (81%)
 rename styles/{css-modules.html => css-modules/index.html} (70%)
 rename styles/{css-variables-list.html => css-variables-list/index.html} (91%)
 rename styles/{css-variables.html => css-variables/index.html} (70%)
 rename styles/{data-attributes.html => data-attributes/index.html} (70%)
 rename styles/{global-styles.html => global-styles/index.html} (64%)
 rename styles/{postcss-preset.html => postcss-preset/index.html} (69%)
 rename styles/{rem.html => rem/index.html} (67%)
 rename styles/{responsive.html => responsive/index.html} (74%)
 rename styles/{rtl.html => rtl/index.html} (65%)
 rename styles/{style-props.html => style-props/index.html} (72%)
 rename styles/{style.html => style/index.html} (58%)
 rename styles/{styles-api.html => styles-api/index.html} (77%)
 rename styles/{styles-performance.html => styles-performance/index.html} (68%)
 rename styles/{unstyled.html => unstyled/index.html} (61%)
 rename styles/{vanilla-extract.html => vanilla-extract/index.html} (71%)
 rename styles/{variants-sizes.html => variants-sizes/index.html} (75%)
 rename templates-usage.html => templates-usage/index.html (72%)
 rename theming/{color-schemes.html => color-schemes/index.html} (75%)
 rename theming/{colors.html => colors/index.html} (91%)
 rename theming/{default-props.html => default-props/index.html} (67%)
 rename theming/{default-theme.html => default-theme/index.html} (73%)
 rename theming/{mantine-provider.html => mantine-provider/index.html} (73%)
 rename theming/{theme-object.html => theme-object/index.html} (80%)
 rename theming/{typography.html => typography/index.html} (73%)

diff --git a/404.html b/404.html
index b8b8080a324..e0a9ad1f211 100644
--- a/404.html
+++ b/404.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/404-603c2fab3de119a8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">404</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/404-603c2fab3de119a8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">404</h1>
 <p class="MdxTypography_paragraph__Lp7wh">Nothing found. If some of the Mantine documentation pages are lining to
 this page, please let us know by opening an <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/issues/new/choose">issue</a>.
-Otherwise, get back to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/">home page</a>.</p></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/404","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+Otherwise, get back to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/">home page</a>.</p></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/404","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/404/index.html b/404/index.html
new file mode 100644
index 00000000000..e0a9ad1f211
--- /dev/null
+++ b/404/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>404 | Mantine</title><meta name="description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience"/><meta name="og:title" content="404 | Mantine"/><meta name="og:description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience"/><meta name="twitter:title" content="404 | Mantine"/><meta name="twitter:description" content="React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/404-603c2fab3de119a8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">404</h1>
+<p class="MdxTypography_paragraph__Lp7wh">Nothing found. If some of the Mantine documentation pages are lining to
+this page, please let us know by opening an <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/issues/new/choose">issue</a>.
+Otherwise, get back to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/">home page</a>.</p></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/404","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js b/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js
similarity index 98%
rename from _next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js
rename to _next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js
index 78489b79675..6bc6efa198c 100644
--- a/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js
+++ b/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js
@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,n,h,d,p,k,g,l,b,f,j,m,y,v,x){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[g,n,l,"static/chunks/4039-ad1c33a04f9417e5.js",s,t,a,o,i,h,d,p,b,f,j,"static/css/0b42572dfc0685d6.css","static/chunks/pages/index-430ac76e0cbf38c6.js"],"/404":[s,e,c,"static/chunks/pages/404-603c2fab3de119a8.js"],"/_error":["static/chunks/pages/_error-02cc11fd74b4e5ff.js"],"/about":[s,e,c,"static/css/2c53d1beec745d31.css","static/chunks/pages/about-4f735a0558cb5bb6.js"],"/app-shell":[p,"static/css/1593bbbe851036b7.css","static/chunks/pages/app-shell-61046ac56d7d6c3b.js"],"/changelog/7-0-0":[r,n,s,e,c,o,m,y,"static/chunks/pages/changelog/7-0-0-f8f598f970f00b71.js"],"/changelog/previous-versions":[s,e,c,"static/chunks/pages/changelog/previous-versions-e82db25d087ccbfa.js"],"/colors-generator":["static/chunks/1333-769c51c7075e50db.js","static/css/2f7f36020c7f1b11.css","static/chunks/pages/colors-generator-55b397ea41fc6dea.js"],"/combobox":[o,"static/css/a31c84cc8d06a9d2.css","static/chunks/pages/combobox-b7914902b2865404.js"],"/contribute":[s,e,c,"static/chunks/pages/contribute-3ca7be664099b35c.js"],"/core/accordion":[s,e,c,f,"static/chunks/pages/core/accordion-b4b99801acd7b315.js"],"/core/action-icon":[s,e,c,"static/chunks/pages/core/action-icon-79b1c0fc510cafd4.js"],"/core/affix":[s,e,c,"static/chunks/pages/core/affix-d13994f8b19d8be5.js"],"/core/alert":[s,e,c,"static/chunks/pages/core/alert-cd9141c6f299bea6.js"],"/core/anchor":[s,e,c,"static/chunks/pages/core/anchor-82e9b620f59b11b8.js"],"/core/app-shell":[s,e,c,"static/chunks/pages/core/app-shell-75db0286f5916356.js"],"/core/aspect-ratio":[s,e,c,"static/chunks/pages/core/aspect-ratio-3e67a35da570053e.js"],"/core/autocomplete":[s,e,c,o,"static/chunks/pages/core/autocomplete-086087a4f31b1274.js"],"/core/avatar":[s,e,c,"static/chunks/pages/core/avatar-cd30a65e8ae692b1.js"],"/core/background-image":[s,e,c,"static/chunks/pages/core/background-image-ba0f458efeb0b6aa.js"],"/core/badge":[s,e,c,"static/chunks/pages/core/badge-235a857d9f52bf11.js"],"/core/blockquote":[s,e,c,"static/chunks/pages/core/blockquote-3452a869af889766.js"],"/core/box":[s,e,c,"static/chunks/pages/core/box-8ea1344bcce0d016.js"],"/core/breadcrumbs":[s,e,c,"static/chunks/pages/core/breadcrumbs-d772d03e29259639.js"],"/core/burger":[s,e,c,"static/chunks/pages/core/burger-ac24c3a6db416c1c.js"],"/core/button":[s,e,c,"static/chunks/pages/core/button-a33e546d38fe0d6a.js"],"/core/card":[s,e,c,"static/chunks/pages/core/card-c8480d9c06d586c5.js"],"/core/center":[s,e,c,"static/chunks/pages/core/center-54e40d7f26b7f1d1.js"],"/core/checkbox":[s,e,c,"static/chunks/pages/core/checkbox-824905278fff7202.js"],"/core/chip":[s,e,c,"static/chunks/pages/core/chip-4ee6b49268677a0f.js"],"/core/close-button":[s,e,c,"static/chunks/pages/core/close-button-23b40e01229b2d7e.js"],"/core/code":[s,e,c,"static/chunks/pages/core/code-1ff6131ae9165253.js"],"/core/collapse":[s,e,c,"static/chunks/pages/core/collapse-026c69898bac2522.js"],"/core/color-input":[s,e,c,"static/chunks/pages/core/color-input-27686785638c1f19.js"],"/core/color-picker":[s,e,c,"static/chunks/pages/core/color-picker-8bb28a401b18ebed.js"],"/core/color-swatch":[s,e,c,"static/chunks/pages/core/color-swatch-76eda182c8cba7a5.js"],"/core/combobox":[s,e,c,o,v,"static/chunks/pages/core/combobox-ed1d83eb2b961226.js"],"/core/container":[s,e,c,"static/chunks/pages/core/container-bb8102414079847a.js"],"/core/copy-button":[s,e,c,"static/chunks/pages/core/copy-button-6b75a8c1ae5e1b5a.js"],"/core/dialog":[s,e,c,"static/chunks/pages/core/dialog-b9f2adfdfd793904.js"],"/core/divider":[s,e,c,"static/chunks/pages/core/divider-949faadea829b4ec.js"],"/core/drawer":[s,e,c,a,i,p,"static/chunks/pages/core/drawer-0de49e704be8fb3b.js"],"/core/fieldset":[s,e,c,"static/chunks/pages/core/fieldset-2cbcd26323df7e0b.js"],"/core/file-button":[s,e,c,"static/chunks/pages/core/file-button-f1622f7dc65f0f0d.js"],"/core/file-input":[s,e,c,"static/chunks/pages/core/file-input-551f0a01874cdf8d.js"],"/core/flex":[s,e,c,"static/chunks/pages/core/flex-892ea82bf3fc7ea8.js"],"/core/focus-trap":[s,e,c,"static/chunks/pages/core/focus-trap-16614a71ce652aeb.js"],"/core/grid":[s,e,c,"static/chunks/pages/core/grid-8bdd544306ab120e.js"],"/core/group":[s,e,c,"static/chunks/pages/core/group-ab5178f5d9000411.js"],"/core/highlight":[s,e,c,"static/chunks/pages/core/highlight-fb9dbf4ad91d443e.js"],"/core/hover-card":[s,e,c,"static/chunks/pages/core/hover-card-d3b3454d7ebb9dff.js"],"/core/image":[s,e,c,"static/chunks/pages/core/image-f988d992e3028dbf.js"],"/core/indicator":[s,e,c,"static/chunks/pages/core/indicator-be8a0627db682baa.js"],"/core/input":["static/chunks/8015-669307b9cf02b7fe.js",s,e,c,"static/chunks/pages/core/input-1b125b6fb4c0178d.js"],"/core/json-input":[s,e,c,"static/chunks/pages/core/json-input-8393e299acdc0341.js"],"/core/kbd":[s,e,c,"static/chunks/pages/core/kbd-d240fc4be69b7406.js"],"/core/list":[s,e,c,"static/chunks/pages/core/list-8376dd80ed78ec4b.js"],"/core/loader":[s,e,c,"static/chunks/pages/core/loader-2eed1da239664aeb.js"],"/core/loading-overlay":[s,e,c,a,i,"static/chunks/pages/core/loading-overlay-4b61a17d71713d8c.js"],"/core/mark":[s,e,c,"static/chunks/pages/core/mark-ffe8bf0434c03f92.js"],"/core/menu":[s,e,c,"static/chunks/pages/core/menu-fc9f267dbbc00c03.js"],"/core/modal":[s,e,c,a,i,"static/chunks/pages/core/modal-b80f055f1e8880a7.js"],"/core/multi-select":[s,e,c,o,j,"static/chunks/pages/core/multi-select-6ccab9bb88319b43.js"],"/core/native-select":[s,e,c,"static/chunks/pages/core/native-select-47bd241dbc0df0b4.js"],"/core/nav-link":[s,e,c,"static/chunks/pages/core/nav-link-a62ce78c1e0a69a9.js"],"/core/notification":[s,e,c,"static/chunks/pages/core/notification-dc748cf3d494da97.js"],"/core/number-input":[r,s,e,c,"static/chunks/pages/core/number-input-57173b1bc35757fe.js"],"/core/overlay":[s,e,c,"static/chunks/pages/core/overlay-2df8c5a21a1b6265.js"],"/core/pagination":[s,e,c,d,"static/chunks/pages/core/pagination-612488ec5cdc1903.js"],"/core/paper":[s,e,c,"static/chunks/pages/core/paper-d658195e4c66a4e0.js"],"/core/password-input":[s,e,c,"static/chunks/pages/core/password-input-ddb449653c7b0453.js"],"/core/pill":[s,e,c,"static/chunks/pages/core/pill-986a825a18bb84a3.js"],"/core/pills-input":[s,e,c,o,v,"static/chunks/pages/core/pills-input-1077e0827ab25d6a.js"],"/core/pin-input":[s,e,c,"static/chunks/pages/core/pin-input-3ae37cb4e3944fa1.js"],"/core/popover":[s,e,c,"static/chunks/pages/core/popover-2f7236164916e6a2.js"],"/core/portal":[s,e,c,"static/chunks/pages/core/portal-9deac8e0b0bcbcdf.js"],"/core/progress":[s,e,c,"static/chunks/pages/core/progress-8fb333608ddcc74f.js"],"/core/radio":[s,e,c,"static/chunks/pages/core/radio-35b0475a2e298fc1.js"],"/core/rating":[s,e,c,"static/chunks/pages/core/rating-ec38a83baa651be2.js"],"/core/ring-progress":[s,e,c,"static/chunks/pages/core/ring-progress-24518559ad47be56.js"],"/core/scroll-area":[s,e,c,"static/chunks/pages/core/scroll-area-1d5ff333ecc4ebe6.js"],"/core/segmented-control":[s,e,c,"static/chunks/pages/core/segmented-control-f37e7ca88ae2ee27.js"],"/core/select":[s,e,c,o,"static/chunks/pages/core/select-dd55e68b93d9f6cf.js"],"/core/simple-grid":[s,e,c,"static/chunks/pages/core/simple-grid-b89732a79f1fe01d.js"],"/core/skeleton":[s,e,c,"static/chunks/pages/core/skeleton-96afcb456c337307.js"],"/core/slider":[s,e,c,"static/chunks/pages/core/slider-1be63797778126a7.js"],"/core/space":[s,e,c,"static/chunks/pages/core/space-40fe502bbbca6d4c.js"],"/core/spoiler":[s,e,c,"static/chunks/pages/core/spoiler-d359d8ddbe1a295d.js"],"/core/stack":[s,e,c,"static/chunks/pages/core/stack-da1ec9dca090055f.js"],"/core/stepper":[s,e,c,"static/chunks/pages/core/stepper-83022ee5bad2e6af.js"],"/core/switch":[s,e,c,"static/chunks/pages/core/switch-f2596308b6d41afa.js"],"/core/table":[s,e,c,"static/chunks/pages/core/table-98fde90c1a0f0a65.js"],"/core/tabs":[s,e,c,"static/chunks/pages/core/tabs-baa5d76ab6567869.js"],"/core/tags-input":[s,e,c,o,m,"static/chunks/pages/core/tags-input-71009298ace757e0.js"],"/core/text":[s,e,c,"static/chunks/pages/core/text-98057227ac27eeb2.js"],"/core/text-input":[s,e,c,"static/chunks/pages/core/text-input-b4ba27109341fe04.js"],"/core/textarea":[s,e,c,"static/chunks/pages/core/textarea-337fe3c42e9cc522.js"],"/core/theme-icon":[s,e,c,"static/chunks/pages/core/theme-icon-6fa8a65f3081967b.js"],"/core/timeline":[s,e,c,"static/chunks/pages/core/timeline-8d8da156751d8a75.js"],"/core/title":[s,e,c,"static/chunks/pages/core/title-8dae48ba8bd0bd6e.js"],"/core/tooltip":[s,e,c,"static/chunks/pages/core/tooltip-5caa911ef4125ef8.js"],"/core/transition":[s,e,c,"static/chunks/pages/core/transition-dc716c3c449ce1d2.js"],"/core/typography-styles-provider":[s,e,c,"static/chunks/pages/core/typography-styles-provider-1bdf6cbeedd4f8bb.js"],"/core/unstyled-button":[s,e,c,"static/chunks/pages/core/unstyled-button-7146d474dae0fe5b.js"],"/core/visually-hidden":[s,e,c,"static/chunks/pages/core/visually-hidden-dbd5f7abc439afe7.js"],"/dates/calendar":[s,e,c,t,"static/chunks/pages/dates/calendar-338fc214c6fde174.js"],"/dates/date-input":[s,e,c,t,"static/chunks/pages/dates/date-input-3a36cdfb91382cfe.js"],"/dates/date-picker":[s,e,c,t,k,"static/chunks/pages/dates/date-picker-2840ac260c27d407.js"],"/dates/date-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/date-picker-input-5cb186eebec60a9f.js"],"/dates/date-time-picker":[s,e,c,t,h,"static/chunks/pages/dates/date-time-picker-84bab5e7092c06d1.js"],"/dates/dates-provider":[s,e,c,t,h,"static/chunks/pages/dates/dates-provider-d22e75c2fc37e763.js"],"/dates/getting-started":[s,e,c,t,u,"static/chunks/pages/dates/getting-started-06a462ad7761843d.js"],"/dates/month-picker":[s,e,c,t,k,"static/chunks/pages/dates/month-picker-d4bfdf5e6439984a.js"],"/dates/month-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/month-picker-input-0bec4416ffcce914.js"],"/dates/time-input":[s,e,c,"static/chunks/pages/dates/time-input-680f95fb443f945b.js"],"/dates/year-picker":[s,e,c,t,k,"static/chunks/pages/dates/year-picker-ab25c5daa2c424c0.js"],"/dates/year-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/year-picker-input-7dd09d975f18370a.js"],"/form/create-form-context":[s,e,c,"static/chunks/pages/form/create-form-context-7c64b8d3a043b263.js"],"/form/errors":[s,e,c,"static/chunks/pages/form/errors-9fa5beb0bc21f923.js"],"/form/nested":[s,e,c,a,"static/chunks/pages/form/nested-a27914bb9f6d9ba5.js"],"/form/recipes":["static/chunks/3c425cc6-dcff8cac03b5558f.js","static/chunks/1531-11d35445c5475ac1.js",s,e,c,a,"static/chunks/pages/form/recipes-f5cf776e291626cf.js"],"/form/status":[s,e,c,a,"static/chunks/pages/form/status-4f09aec8dc1b7727.js"],"/form/use-form":[s,e,c,a,"static/chunks/pages/form/use-form-a5f21be50ed46448.js"],"/form/validation":[r,"static/chunks/5060-7540dfb08e46808c.js",s,e,c,a,"static/chunks/pages/form/validation-99f0e1ec19e372aa.js"],"/form/validators":[r,s,e,c,a,"static/chunks/pages/form/validators-26a2fbd77eb58593.js"],"/form/values":[s,e,c,a,"static/chunks/pages/form/values-5b67f1ee8f01ba0e.js"],"/getting-started":[s,e,c,"static/css/7eac7ac93049bfac.css","static/chunks/pages/getting-started-d599a58b1b2d57e5.js"],"/guides/6x-to-7x":[s,e,c,"static/chunks/pages/guides/6x-to-7x-dd0ccf2353b8f509.js"],"/guides/gatsby":[s,e,c,"static/chunks/pages/guides/gatsby-1849339aaa7d5b04.js"],"/guides/icons":[s,e,c,"static/chunks/pages/guides/icons-bb3bdf860e34f5f5.js"],"/guides/javascript":[s,e,c,"static/chunks/pages/guides/javascript-6451fb2a4105e6b9.js"],"/guides/jest":[s,e,c,"static/chunks/pages/guides/jest-a2c47b0728b8b4eb.js"],"/guides/next":[s,e,c,"static/chunks/pages/guides/next-670e1444622eb2a6.js"],"/guides/polymorphic":[s,e,c,"static/chunks/pages/guides/polymorphic-6869c2a748b698b0.js"],"/guides/redwood":[s,e,c,"static/chunks/pages/guides/redwood-fde4340fd64504a1.js"],"/guides/remix":[s,e,c,"static/chunks/pages/guides/remix-6f4ef41250d55d42.js"],"/guides/storybook":[s,e,c,"static/chunks/pages/guides/storybook-49240b71a1938687.js"],"/guides/typescript":[s,e,c,"static/chunks/pages/guides/typescript-a1d7cdd0bae95894.js"],"/guides/vite":[s,e,c,"static/chunks/pages/guides/vite-234e7409487e5120.js"],"/hooks/use-click-outside":[s,e,c,"static/chunks/pages/hooks/use-click-outside-bda81bf5d77ae3ac.js"],"/hooks/use-clipboard":[s,e,c,"static/chunks/pages/hooks/use-clipboard-de060be53aa6e8eb.js"],"/hooks/use-color-scheme":[s,e,c,"static/chunks/pages/hooks/use-color-scheme-ec0707a6f8037d97.js"],"/hooks/use-counter":[s,e,c,"static/chunks/pages/hooks/use-counter-4cc3020cb3b5418d.js"],"/hooks/use-debounced-state":[s,e,c,"static/chunks/pages/hooks/use-debounced-state-5d0d2dbf56edf5d2.js"],"/hooks/use-debounced-value":[s,e,c,"static/chunks/pages/hooks/use-debounced-value-e930c8268c0b0b9b.js"],"/hooks/use-did-update":[s,e,c,"static/chunks/pages/hooks/use-did-update-09efaaceee1f1437.js"],"/hooks/use-disclosure":[s,e,c,"static/chunks/pages/hooks/use-disclosure-9a81a9feadfe6ccb.js"],"/hooks/use-document-title":[s,e,c,"static/chunks/pages/hooks/use-document-title-d205f2419c6eca40.js"],"/hooks/use-document-visibility":[s,e,c,"static/chunks/pages/hooks/use-document-visibility-8fd8db06d182cdf5.js"],"/hooks/use-element-size":[s,e,c,"static/chunks/pages/hooks/use-element-size-c702e63072750746.js"],"/hooks/use-event-listener":[s,e,c,"static/chunks/pages/hooks/use-event-listener-add2decb0f0ef2dd.js"],"/hooks/use-eye-dropper":[s,e,c,"static/chunks/pages/hooks/use-eye-dropper-e6297428dc9e25ac.js"],"/hooks/use-favicon":[s,e,c,"static/chunks/pages/hooks/use-favicon-22724936dbdfc3df.js"],"/hooks/use-focus-return":[s,e,c,a,i,"static/chunks/pages/hooks/use-focus-return-2288497a7a230eb3.js"],"/hooks/use-focus-trap":[s,e,c,"static/chunks/pages/hooks/use-focus-trap-32fc5ea080ae67af.js"],"/hooks/use-focus-within":[s,e,c,"static/chunks/pages/hooks/use-focus-within-4b258234dbf7f56f.js"],"/hooks/use-force-update":[s,e,c,"static/chunks/pages/hooks/use-force-update-72423505c6753afb.js"],"/hooks/use-fullscreen":[s,e,c,"static/chunks/pages/hooks/use-fullscreen-f7e6b3248e9b038e.js"],"/hooks/use-hash":[s,e,c,"static/chunks/pages/hooks/use-hash-8ba8b4f10370c000.js"],"/hooks/use-headroom":[s,e,c,"static/chunks/pages/hooks/use-headroom-fb83e02d2553a017.js"],"/hooks/use-hotkeys":[s,e,c,"static/chunks/pages/hooks/use-hotkeys-7e0da88c9121f7d9.js"],"/hooks/use-hover":[s,e,c,"static/chunks/pages/hooks/use-hover-47e5ac0bde18483d.js"],"/hooks/use-id":[s,e,c,"static/chunks/pages/hooks/use-id-694117ad3971c61e.js"],"/hooks/use-idle":[s,e,c,"static/chunks/pages/hooks/use-idle-b8a11ed995863537.js"],"/hooks/use-input-state":[s,e,c,"static/chunks/pages/hooks/use-input-state-9b37edeb205fd501.js"],"/hooks/use-intersection":[s,e,c,"static/chunks/pages/hooks/use-intersection-71e56d31d6ed4af8.js"],"/hooks/use-interval":[s,e,c,"static/chunks/pages/hooks/use-interval-df9376227430ab78.js"],"/hooks/use-isomorphic-effect":[s,e,c,"static/chunks/pages/hooks/use-isomorphic-effect-480bc69564754df6.js"],"/hooks/use-list-state":[s,e,c,"static/chunks/pages/hooks/use-list-state-b336d42abddc60b3.js"],"/hooks/use-local-storage":[s,e,c,"static/chunks/pages/hooks/use-local-storage-5bd05f1496e68b35.js"],"/hooks/use-logger":[s,e,c,"static/chunks/pages/hooks/use-logger-ccffe95bbcba7589.js"],"/hooks/use-media-query":[s,e,c,"static/chunks/pages/hooks/use-media-query-8de0c29783d41868.js"],"/hooks/use-merged-ref":[s,e,c,"static/chunks/pages/hooks/use-merged-ref-1ee247cf1271bf95.js"],"/hooks/use-mouse":[s,e,c,"static/chunks/pages/hooks/use-mouse-568687c99f8bdf26.js"],"/hooks/use-move":[s,e,c,"static/chunks/pages/hooks/use-move-6c2302746de1b727.js"],"/hooks/use-network":[s,e,c,"static/chunks/pages/hooks/use-network-c71ec4f75dbfd106.js"],"/hooks/use-os":[s,e,c,"static/chunks/pages/hooks/use-os-a559b776eaff431d.js"],"/hooks/use-page-leave":[s,e,c,"static/chunks/pages/hooks/use-page-leave-90fb520af0bb8d85.js"],"/hooks/use-pagination":[s,e,c,d,"static/chunks/pages/hooks/use-pagination-3b99ca7c5e4530f9.js"],"/hooks/use-previous":[s,e,c,"static/chunks/pages/hooks/use-previous-ec274840b068eda0.js"],"/hooks/use-queue":[s,e,c,"static/chunks/pages/hooks/use-queue-82c72f7451ce8dd5.js"],"/hooks/use-reduced-motion":[s,e,c,"static/chunks/pages/hooks/use-reduced-motion-3f7e2612e2d15c8a.js"],"/hooks/use-resize-observer":[s,e,c,"static/chunks/pages/hooks/use-resize-observer-dcdaebfe6625c7a8.js"],"/hooks/use-scroll-into-view":[s,e,c,"static/chunks/pages/hooks/use-scroll-into-view-7f10e118e6507817.js"],"/hooks/use-set-state":[s,e,c,"static/chunks/pages/hooks/use-set-state-7978c1afd5a50761.js"],"/hooks/use-shallow-effect":[s,e,c,"static/chunks/pages/hooks/use-shallow-effect-2a23600a5117eddc.js"],"/hooks/use-text-selection":[s,e,c,"static/chunks/pages/hooks/use-text-selection-d64f768b2561c2e6.js"],"/hooks/use-timeout":[s,e,c,"static/chunks/pages/hooks/use-timeout-bdc6d315b1e3c533.js"],"/hooks/use-toggle":[s,e,c,"static/chunks/pages/hooks/use-toggle-fb8f3fab86583da1.js"],"/hooks/use-uncontrolled":[s,e,c,"static/chunks/pages/hooks/use-uncontrolled-03c95ba36e5aca76.js"],"/hooks/use-validated-state":[s,e,c,"static/chunks/pages/hooks/use-validated-state-fc8998ad2148299f.js"],"/hooks/use-viewport-size":[s,e,c,"static/chunks/pages/hooks/use-viewport-size-6680ecfddbab061d.js"],"/hooks/use-window-event":[s,e,c,"static/chunks/pages/hooks/use-window-event-0c609bf56c040c05.js"],"/hooks/use-window-scroll":[s,e,c,"static/chunks/pages/hooks/use-window-scroll-94e1846e30b2f4e8.js"],"/others/carousel":[n,s,e,c,y,"static/chunks/pages/others/carousel-9f469c680cff716a.js"],"/others/code-highlight":[s,e,c,"static/chunks/pages/others/code-highlight-e7c1cfe8d37c7e48.js"],"/others/dropzone":["static/chunks/761-35955f10110e3a96.js",s,e,c,"static/css/297e354fa1f5a8f9.css","static/chunks/pages/others/dropzone-2f5faa4a1e839679.js"],"/others/modals":[s,e,c,"static/chunks/pages/others/modals-3796bd3b5eb149dd.js"],"/others/notifications":[s,e,c,"static/chunks/pages/others/notifications-8bdaa14feb703f1c.js"],"/others/nprogress":[s,e,c,"static/chunks/pages/others/nprogress-9339f0c6d1d60119.js"],"/others/spotlight":[s,e,c,"static/chunks/pages/others/spotlight-0f7a2d72c079d247.js"],"/others/tiptap":[g,l,"static/chunks/2799-aa8381ffc0207c6d.js",s,e,c,b,"static/chunks/pages/others/tiptap-16018d3dff2c9bf3.js"],"/overview":[s,e,c,x,"static/chunks/pages/overview-e68183f5eb291db4.js"],"/styles/color-functions":[s,e,c,"static/chunks/pages/styles/color-functions-b25b3bda5a5edf7d.js"],"/styles/css-files-list":[s,e,c,"static/chunks/pages/styles/css-files-list-26e30e6d8ad4f468.js"],"/styles/css-modules":[s,e,c,"static/chunks/pages/styles/css-modules-71ab5ac464180f3e.js"],"/styles/css-variables":[s,e,c,"static/chunks/pages/styles/css-variables-a901387ac3cc0aa4.js"],"/styles/css-variables-list":[s,e,c,"static/chunks/pages/styles/css-variables-list-872e863777de53b7.js"],"/styles/data-attributes":[s,e,c,"static/chunks/pages/styles/data-attributes-25cf7c4084961dfc.js"],"/styles/global-styles":[s,e,c,"static/chunks/pages/styles/global-styles-95fe47c111c99603.js"],"/styles/postcss-preset":[s,e,c,"static/chunks/pages/styles/postcss-preset-e3502a0aafaba69b.js"],"/styles/rem":[s,e,c,"static/chunks/pages/styles/rem-c5e0739c34aa0a91.js"],"/styles/responsive":[s,e,c,"static/chunks/pages/styles/responsive-750ebbfd489bd1ce.js"],"/styles/rtl":[s,e,c,"static/chunks/pages/styles/rtl-d40ddfbe0d505869.js"],"/styles/style":[s,e,c,"static/chunks/pages/styles/style-59c48df9291ab1af.js"],"/styles/style-props":[s,e,c,"static/chunks/pages/styles/style-props-1fb959cd43247984.js"],"/styles/styles-api":[s,e,c,"static/chunks/pages/styles/styles-api-5dbfd5697d009a06.js"],"/styles/styles-performance":[s,e,c,"static/chunks/pages/styles/styles-performance-0ae4bc47a8fe3491.js"],"/styles/unstyled":[s,e,c,"static/chunks/pages/styles/unstyled-f1dab855a1ec0cce.js"],"/styles/vanilla-extract":[s,e,c,"static/chunks/pages/styles/vanilla-extract-2d99f12f2f66ae75.js"],"/styles/variants-sizes":[s,e,c,"static/chunks/pages/styles/variants-sizes-c932d28197612170.js"],"/templates-usage":[s,e,c,"static/chunks/pages/templates-usage-8bb5f21805048000.js"],"/theming/color-schemes":[s,e,c,"static/chunks/pages/theming/color-schemes-c986bddd4d4fdcff.js"],"/theming/colors":[s,e,c,x,"static/chunks/pages/theming/colors-e98bfc4e145270b8.js"],"/theming/default-props":[s,e,c,"static/chunks/pages/theming/default-props-ca4da7cae68f8fdb.js"],"/theming/default-theme":[s,e,c,"static/chunks/pages/theming/default-theme-1e7f1a5eb268e915.js"],"/theming/mantine-provider":[s,e,c,"static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js"],"/theming/theme-object":[s,e,c,"static/chunks/pages/theming/theme-object-0376ae404aaa70a5.js"],"/theming/typography":[s,e,c,"static/chunks/pages/theming/typography-2397911cfc5ad29c.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/previous-versions","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/create-form-context","/form/errors","/form/nested","/form/recipes","/form/status","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mouse","/hooks/use-move","/hooks/use-network","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-text-selection","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/global-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography"]}}("static/chunks/1300-a1599e086a440f9c.js","static/css/38da4a8345682411.css","static/chunks/178-67b6774636d9bfd4.js","static/chunks/3773-9b101a05417aee65.js","static/chunks/1757-14b12002dae37571.js","static/chunks/4485-54fa58b62686123b.js","static/chunks/8945-dced5d0b206191b0.js","static/chunks/4136-6fb5e5d743480d39.js","static/chunks/1080-f9995edff1a2d0ca.js","static/chunks/213-b3723d19cd82f7df.js","static/chunks/9935-a1af4e961299387a.js","static/chunks/7567-d1146e91d1df2c98.js","static/chunks/6-97d8f3d87523372c.js","static/chunks/1035-2078d70242b9f415.js","static/chunks/849baa33-4b0f9eb87903687b.js","static/chunks/2085-bfeaa2af84065661.js","static/chunks/2381-9c97f560cddb868b.js","static/chunks/8126-f58446ccde90abe6.js","static/chunks/7285-35f2fd967e6310ce.js","static/chunks/1347-e8c7bcc60db06dc5.js","static/chunks/9077-a05e7f12524f0a6d.js","static/chunks/9-1e1cb50a06718751.js","static/css/e5f75161ef22fdc6.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
+self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,n,h,d,p,k,g,l,b,f,j,m,y,v,x){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[g,n,l,"static/chunks/4039-ad1c33a04f9417e5.js",s,t,a,o,i,h,d,p,b,f,j,"static/css/0b42572dfc0685d6.css","static/chunks/pages/index-430ac76e0cbf38c6.js"],"/404":[s,e,c,"static/chunks/pages/404-603c2fab3de119a8.js"],"/_error":["static/chunks/pages/_error-02cc11fd74b4e5ff.js"],"/about":[s,e,c,"static/css/2c53d1beec745d31.css","static/chunks/pages/about-4f735a0558cb5bb6.js"],"/app-shell":[p,"static/css/1593bbbe851036b7.css","static/chunks/pages/app-shell-61046ac56d7d6c3b.js"],"/changelog/7-0-0":[r,n,s,e,c,o,m,y,"static/chunks/pages/changelog/7-0-0-f8f598f970f00b71.js"],"/changelog/previous-versions":[s,e,c,"static/chunks/pages/changelog/previous-versions-e82db25d087ccbfa.js"],"/colors-generator":["static/chunks/1333-769c51c7075e50db.js","static/css/2f7f36020c7f1b11.css","static/chunks/pages/colors-generator-7af0078c6aa3ab46.js"],"/combobox":[o,"static/css/a31c84cc8d06a9d2.css","static/chunks/pages/combobox-b7914902b2865404.js"],"/contribute":[s,e,c,"static/chunks/pages/contribute-3ca7be664099b35c.js"],"/core/accordion":[s,e,c,f,"static/chunks/pages/core/accordion-b4b99801acd7b315.js"],"/core/action-icon":[s,e,c,"static/chunks/pages/core/action-icon-79b1c0fc510cafd4.js"],"/core/affix":[s,e,c,"static/chunks/pages/core/affix-d13994f8b19d8be5.js"],"/core/alert":[s,e,c,"static/chunks/pages/core/alert-cd9141c6f299bea6.js"],"/core/anchor":[s,e,c,"static/chunks/pages/core/anchor-82e9b620f59b11b8.js"],"/core/app-shell":[s,e,c,"static/chunks/pages/core/app-shell-75db0286f5916356.js"],"/core/aspect-ratio":[s,e,c,"static/chunks/pages/core/aspect-ratio-3e67a35da570053e.js"],"/core/autocomplete":[s,e,c,o,"static/chunks/pages/core/autocomplete-086087a4f31b1274.js"],"/core/avatar":[s,e,c,"static/chunks/pages/core/avatar-cd30a65e8ae692b1.js"],"/core/background-image":[s,e,c,"static/chunks/pages/core/background-image-ba0f458efeb0b6aa.js"],"/core/badge":[s,e,c,"static/chunks/pages/core/badge-235a857d9f52bf11.js"],"/core/blockquote":[s,e,c,"static/chunks/pages/core/blockquote-3452a869af889766.js"],"/core/box":[s,e,c,"static/chunks/pages/core/box-8ea1344bcce0d016.js"],"/core/breadcrumbs":[s,e,c,"static/chunks/pages/core/breadcrumbs-d772d03e29259639.js"],"/core/burger":[s,e,c,"static/chunks/pages/core/burger-ac24c3a6db416c1c.js"],"/core/button":[s,e,c,"static/chunks/pages/core/button-a33e546d38fe0d6a.js"],"/core/card":[s,e,c,"static/chunks/pages/core/card-c8480d9c06d586c5.js"],"/core/center":[s,e,c,"static/chunks/pages/core/center-54e40d7f26b7f1d1.js"],"/core/checkbox":[s,e,c,"static/chunks/pages/core/checkbox-824905278fff7202.js"],"/core/chip":[s,e,c,"static/chunks/pages/core/chip-4ee6b49268677a0f.js"],"/core/close-button":[s,e,c,"static/chunks/pages/core/close-button-23b40e01229b2d7e.js"],"/core/code":[s,e,c,"static/chunks/pages/core/code-1ff6131ae9165253.js"],"/core/collapse":[s,e,c,"static/chunks/pages/core/collapse-026c69898bac2522.js"],"/core/color-input":[s,e,c,"static/chunks/pages/core/color-input-27686785638c1f19.js"],"/core/color-picker":[s,e,c,"static/chunks/pages/core/color-picker-8bb28a401b18ebed.js"],"/core/color-swatch":[s,e,c,"static/chunks/pages/core/color-swatch-76eda182c8cba7a5.js"],"/core/combobox":[s,e,c,o,v,"static/chunks/pages/core/combobox-ed1d83eb2b961226.js"],"/core/container":[s,e,c,"static/chunks/pages/core/container-bb8102414079847a.js"],"/core/copy-button":[s,e,c,"static/chunks/pages/core/copy-button-6b75a8c1ae5e1b5a.js"],"/core/dialog":[s,e,c,"static/chunks/pages/core/dialog-b9f2adfdfd793904.js"],"/core/divider":[s,e,c,"static/chunks/pages/core/divider-949faadea829b4ec.js"],"/core/drawer":[s,e,c,a,i,p,"static/chunks/pages/core/drawer-0de49e704be8fb3b.js"],"/core/fieldset":[s,e,c,"static/chunks/pages/core/fieldset-2cbcd26323df7e0b.js"],"/core/file-button":[s,e,c,"static/chunks/pages/core/file-button-f1622f7dc65f0f0d.js"],"/core/file-input":[s,e,c,"static/chunks/pages/core/file-input-551f0a01874cdf8d.js"],"/core/flex":[s,e,c,"static/chunks/pages/core/flex-892ea82bf3fc7ea8.js"],"/core/focus-trap":[s,e,c,"static/chunks/pages/core/focus-trap-16614a71ce652aeb.js"],"/core/grid":[s,e,c,"static/chunks/pages/core/grid-8bdd544306ab120e.js"],"/core/group":[s,e,c,"static/chunks/pages/core/group-ab5178f5d9000411.js"],"/core/highlight":[s,e,c,"static/chunks/pages/core/highlight-fb9dbf4ad91d443e.js"],"/core/hover-card":[s,e,c,"static/chunks/pages/core/hover-card-d3b3454d7ebb9dff.js"],"/core/image":[s,e,c,"static/chunks/pages/core/image-f988d992e3028dbf.js"],"/core/indicator":[s,e,c,"static/chunks/pages/core/indicator-be8a0627db682baa.js"],"/core/input":["static/chunks/8015-669307b9cf02b7fe.js",s,e,c,"static/chunks/pages/core/input-1b125b6fb4c0178d.js"],"/core/json-input":[s,e,c,"static/chunks/pages/core/json-input-8393e299acdc0341.js"],"/core/kbd":[s,e,c,"static/chunks/pages/core/kbd-d240fc4be69b7406.js"],"/core/list":[s,e,c,"static/chunks/pages/core/list-8376dd80ed78ec4b.js"],"/core/loader":[s,e,c,"static/chunks/pages/core/loader-2eed1da239664aeb.js"],"/core/loading-overlay":[s,e,c,a,i,"static/chunks/pages/core/loading-overlay-4b61a17d71713d8c.js"],"/core/mark":[s,e,c,"static/chunks/pages/core/mark-ffe8bf0434c03f92.js"],"/core/menu":[s,e,c,"static/chunks/pages/core/menu-fc9f267dbbc00c03.js"],"/core/modal":[s,e,c,a,i,"static/chunks/pages/core/modal-b80f055f1e8880a7.js"],"/core/multi-select":[s,e,c,o,j,"static/chunks/pages/core/multi-select-6ccab9bb88319b43.js"],"/core/native-select":[s,e,c,"static/chunks/pages/core/native-select-47bd241dbc0df0b4.js"],"/core/nav-link":[s,e,c,"static/chunks/pages/core/nav-link-a62ce78c1e0a69a9.js"],"/core/notification":[s,e,c,"static/chunks/pages/core/notification-dc748cf3d494da97.js"],"/core/number-input":[r,s,e,c,"static/chunks/pages/core/number-input-57173b1bc35757fe.js"],"/core/overlay":[s,e,c,"static/chunks/pages/core/overlay-2df8c5a21a1b6265.js"],"/core/pagination":[s,e,c,d,"static/chunks/pages/core/pagination-612488ec5cdc1903.js"],"/core/paper":[s,e,c,"static/chunks/pages/core/paper-d658195e4c66a4e0.js"],"/core/password-input":[s,e,c,"static/chunks/pages/core/password-input-ddb449653c7b0453.js"],"/core/pill":[s,e,c,"static/chunks/pages/core/pill-986a825a18bb84a3.js"],"/core/pills-input":[s,e,c,o,v,"static/chunks/pages/core/pills-input-1077e0827ab25d6a.js"],"/core/pin-input":[s,e,c,"static/chunks/pages/core/pin-input-3ae37cb4e3944fa1.js"],"/core/popover":[s,e,c,"static/chunks/pages/core/popover-2f7236164916e6a2.js"],"/core/portal":[s,e,c,"static/chunks/pages/core/portal-9deac8e0b0bcbcdf.js"],"/core/progress":[s,e,c,"static/chunks/pages/core/progress-8fb333608ddcc74f.js"],"/core/radio":[s,e,c,"static/chunks/pages/core/radio-35b0475a2e298fc1.js"],"/core/rating":[s,e,c,"static/chunks/pages/core/rating-ec38a83baa651be2.js"],"/core/ring-progress":[s,e,c,"static/chunks/pages/core/ring-progress-24518559ad47be56.js"],"/core/scroll-area":[s,e,c,"static/chunks/pages/core/scroll-area-1d5ff333ecc4ebe6.js"],"/core/segmented-control":[s,e,c,"static/chunks/pages/core/segmented-control-f37e7ca88ae2ee27.js"],"/core/select":[s,e,c,o,"static/chunks/pages/core/select-dd55e68b93d9f6cf.js"],"/core/simple-grid":[s,e,c,"static/chunks/pages/core/simple-grid-b89732a79f1fe01d.js"],"/core/skeleton":[s,e,c,"static/chunks/pages/core/skeleton-96afcb456c337307.js"],"/core/slider":[s,e,c,"static/chunks/pages/core/slider-1be63797778126a7.js"],"/core/space":[s,e,c,"static/chunks/pages/core/space-40fe502bbbca6d4c.js"],"/core/spoiler":[s,e,c,"static/chunks/pages/core/spoiler-d359d8ddbe1a295d.js"],"/core/stack":[s,e,c,"static/chunks/pages/core/stack-da1ec9dca090055f.js"],"/core/stepper":[s,e,c,"static/chunks/pages/core/stepper-83022ee5bad2e6af.js"],"/core/switch":[s,e,c,"static/chunks/pages/core/switch-f2596308b6d41afa.js"],"/core/table":[s,e,c,"static/chunks/pages/core/table-98fde90c1a0f0a65.js"],"/core/tabs":[s,e,c,"static/chunks/pages/core/tabs-baa5d76ab6567869.js"],"/core/tags-input":[s,e,c,o,m,"static/chunks/pages/core/tags-input-71009298ace757e0.js"],"/core/text":[s,e,c,"static/chunks/pages/core/text-98057227ac27eeb2.js"],"/core/text-input":[s,e,c,"static/chunks/pages/core/text-input-b4ba27109341fe04.js"],"/core/textarea":[s,e,c,"static/chunks/pages/core/textarea-337fe3c42e9cc522.js"],"/core/theme-icon":[s,e,c,"static/chunks/pages/core/theme-icon-6fa8a65f3081967b.js"],"/core/timeline":[s,e,c,"static/chunks/pages/core/timeline-8d8da156751d8a75.js"],"/core/title":[s,e,c,"static/chunks/pages/core/title-8dae48ba8bd0bd6e.js"],"/core/tooltip":[s,e,c,"static/chunks/pages/core/tooltip-5caa911ef4125ef8.js"],"/core/transition":[s,e,c,"static/chunks/pages/core/transition-dc716c3c449ce1d2.js"],"/core/typography-styles-provider":[s,e,c,"static/chunks/pages/core/typography-styles-provider-1bdf6cbeedd4f8bb.js"],"/core/unstyled-button":[s,e,c,"static/chunks/pages/core/unstyled-button-7146d474dae0fe5b.js"],"/core/visually-hidden":[s,e,c,"static/chunks/pages/core/visually-hidden-dbd5f7abc439afe7.js"],"/dates/calendar":[s,e,c,t,"static/chunks/pages/dates/calendar-338fc214c6fde174.js"],"/dates/date-input":[s,e,c,t,"static/chunks/pages/dates/date-input-3a36cdfb91382cfe.js"],"/dates/date-picker":[s,e,c,t,k,"static/chunks/pages/dates/date-picker-2840ac260c27d407.js"],"/dates/date-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/date-picker-input-5cb186eebec60a9f.js"],"/dates/date-time-picker":[s,e,c,t,h,"static/chunks/pages/dates/date-time-picker-84bab5e7092c06d1.js"],"/dates/dates-provider":[s,e,c,t,h,"static/chunks/pages/dates/dates-provider-d22e75c2fc37e763.js"],"/dates/getting-started":[s,e,c,t,u,"static/chunks/pages/dates/getting-started-06a462ad7761843d.js"],"/dates/month-picker":[s,e,c,t,k,"static/chunks/pages/dates/month-picker-d4bfdf5e6439984a.js"],"/dates/month-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/month-picker-input-0bec4416ffcce914.js"],"/dates/time-input":[s,e,c,"static/chunks/pages/dates/time-input-680f95fb443f945b.js"],"/dates/year-picker":[s,e,c,t,k,"static/chunks/pages/dates/year-picker-ab25c5daa2c424c0.js"],"/dates/year-picker-input":[s,e,c,t,u,"static/chunks/pages/dates/year-picker-input-7dd09d975f18370a.js"],"/form/create-form-context":[s,e,c,"static/chunks/pages/form/create-form-context-7c64b8d3a043b263.js"],"/form/errors":[s,e,c,"static/chunks/pages/form/errors-9fa5beb0bc21f923.js"],"/form/nested":[s,e,c,a,"static/chunks/pages/form/nested-a27914bb9f6d9ba5.js"],"/form/recipes":["static/chunks/3c425cc6-dcff8cac03b5558f.js","static/chunks/1531-11d35445c5475ac1.js",s,e,c,a,"static/chunks/pages/form/recipes-f5cf776e291626cf.js"],"/form/status":[s,e,c,a,"static/chunks/pages/form/status-4f09aec8dc1b7727.js"],"/form/use-form":[s,e,c,a,"static/chunks/pages/form/use-form-a5f21be50ed46448.js"],"/form/validation":[r,"static/chunks/5060-7540dfb08e46808c.js",s,e,c,a,"static/chunks/pages/form/validation-99f0e1ec19e372aa.js"],"/form/validators":[r,s,e,c,a,"static/chunks/pages/form/validators-26a2fbd77eb58593.js"],"/form/values":[s,e,c,a,"static/chunks/pages/form/values-5b67f1ee8f01ba0e.js"],"/getting-started":[s,e,c,"static/css/7eac7ac93049bfac.css","static/chunks/pages/getting-started-d599a58b1b2d57e5.js"],"/guides/6x-to-7x":[s,e,c,"static/chunks/pages/guides/6x-to-7x-dd0ccf2353b8f509.js"],"/guides/gatsby":[s,e,c,"static/chunks/pages/guides/gatsby-1849339aaa7d5b04.js"],"/guides/icons":[s,e,c,"static/chunks/pages/guides/icons-bb3bdf860e34f5f5.js"],"/guides/javascript":[s,e,c,"static/chunks/pages/guides/javascript-6451fb2a4105e6b9.js"],"/guides/jest":[s,e,c,"static/chunks/pages/guides/jest-a2c47b0728b8b4eb.js"],"/guides/next":[s,e,c,"static/chunks/pages/guides/next-670e1444622eb2a6.js"],"/guides/polymorphic":[s,e,c,"static/chunks/pages/guides/polymorphic-6869c2a748b698b0.js"],"/guides/redwood":[s,e,c,"static/chunks/pages/guides/redwood-fde4340fd64504a1.js"],"/guides/remix":[s,e,c,"static/chunks/pages/guides/remix-6f4ef41250d55d42.js"],"/guides/storybook":[s,e,c,"static/chunks/pages/guides/storybook-49240b71a1938687.js"],"/guides/typescript":[s,e,c,"static/chunks/pages/guides/typescript-a1d7cdd0bae95894.js"],"/guides/vite":[s,e,c,"static/chunks/pages/guides/vite-234e7409487e5120.js"],"/hooks/use-click-outside":[s,e,c,"static/chunks/pages/hooks/use-click-outside-bda81bf5d77ae3ac.js"],"/hooks/use-clipboard":[s,e,c,"static/chunks/pages/hooks/use-clipboard-de060be53aa6e8eb.js"],"/hooks/use-color-scheme":[s,e,c,"static/chunks/pages/hooks/use-color-scheme-ec0707a6f8037d97.js"],"/hooks/use-counter":[s,e,c,"static/chunks/pages/hooks/use-counter-4cc3020cb3b5418d.js"],"/hooks/use-debounced-state":[s,e,c,"static/chunks/pages/hooks/use-debounced-state-5d0d2dbf56edf5d2.js"],"/hooks/use-debounced-value":[s,e,c,"static/chunks/pages/hooks/use-debounced-value-e930c8268c0b0b9b.js"],"/hooks/use-did-update":[s,e,c,"static/chunks/pages/hooks/use-did-update-09efaaceee1f1437.js"],"/hooks/use-disclosure":[s,e,c,"static/chunks/pages/hooks/use-disclosure-9a81a9feadfe6ccb.js"],"/hooks/use-document-title":[s,e,c,"static/chunks/pages/hooks/use-document-title-d205f2419c6eca40.js"],"/hooks/use-document-visibility":[s,e,c,"static/chunks/pages/hooks/use-document-visibility-8fd8db06d182cdf5.js"],"/hooks/use-element-size":[s,e,c,"static/chunks/pages/hooks/use-element-size-c702e63072750746.js"],"/hooks/use-event-listener":[s,e,c,"static/chunks/pages/hooks/use-event-listener-add2decb0f0ef2dd.js"],"/hooks/use-eye-dropper":[s,e,c,"static/chunks/pages/hooks/use-eye-dropper-e6297428dc9e25ac.js"],"/hooks/use-favicon":[s,e,c,"static/chunks/pages/hooks/use-favicon-22724936dbdfc3df.js"],"/hooks/use-focus-return":[s,e,c,a,i,"static/chunks/pages/hooks/use-focus-return-2288497a7a230eb3.js"],"/hooks/use-focus-trap":[s,e,c,"static/chunks/pages/hooks/use-focus-trap-32fc5ea080ae67af.js"],"/hooks/use-focus-within":[s,e,c,"static/chunks/pages/hooks/use-focus-within-4b258234dbf7f56f.js"],"/hooks/use-force-update":[s,e,c,"static/chunks/pages/hooks/use-force-update-72423505c6753afb.js"],"/hooks/use-fullscreen":[s,e,c,"static/chunks/pages/hooks/use-fullscreen-f7e6b3248e9b038e.js"],"/hooks/use-hash":[s,e,c,"static/chunks/pages/hooks/use-hash-8ba8b4f10370c000.js"],"/hooks/use-headroom":[s,e,c,"static/chunks/pages/hooks/use-headroom-fb83e02d2553a017.js"],"/hooks/use-hotkeys":[s,e,c,"static/chunks/pages/hooks/use-hotkeys-7e0da88c9121f7d9.js"],"/hooks/use-hover":[s,e,c,"static/chunks/pages/hooks/use-hover-47e5ac0bde18483d.js"],"/hooks/use-id":[s,e,c,"static/chunks/pages/hooks/use-id-694117ad3971c61e.js"],"/hooks/use-idle":[s,e,c,"static/chunks/pages/hooks/use-idle-b8a11ed995863537.js"],"/hooks/use-input-state":[s,e,c,"static/chunks/pages/hooks/use-input-state-9b37edeb205fd501.js"],"/hooks/use-intersection":[s,e,c,"static/chunks/pages/hooks/use-intersection-71e56d31d6ed4af8.js"],"/hooks/use-interval":[s,e,c,"static/chunks/pages/hooks/use-interval-df9376227430ab78.js"],"/hooks/use-isomorphic-effect":[s,e,c,"static/chunks/pages/hooks/use-isomorphic-effect-480bc69564754df6.js"],"/hooks/use-list-state":[s,e,c,"static/chunks/pages/hooks/use-list-state-b336d42abddc60b3.js"],"/hooks/use-local-storage":[s,e,c,"static/chunks/pages/hooks/use-local-storage-5bd05f1496e68b35.js"],"/hooks/use-logger":[s,e,c,"static/chunks/pages/hooks/use-logger-ccffe95bbcba7589.js"],"/hooks/use-media-query":[s,e,c,"static/chunks/pages/hooks/use-media-query-8de0c29783d41868.js"],"/hooks/use-merged-ref":[s,e,c,"static/chunks/pages/hooks/use-merged-ref-1ee247cf1271bf95.js"],"/hooks/use-mouse":[s,e,c,"static/chunks/pages/hooks/use-mouse-568687c99f8bdf26.js"],"/hooks/use-move":[s,e,c,"static/chunks/pages/hooks/use-move-6c2302746de1b727.js"],"/hooks/use-network":[s,e,c,"static/chunks/pages/hooks/use-network-c71ec4f75dbfd106.js"],"/hooks/use-os":[s,e,c,"static/chunks/pages/hooks/use-os-a559b776eaff431d.js"],"/hooks/use-page-leave":[s,e,c,"static/chunks/pages/hooks/use-page-leave-90fb520af0bb8d85.js"],"/hooks/use-pagination":[s,e,c,d,"static/chunks/pages/hooks/use-pagination-3b99ca7c5e4530f9.js"],"/hooks/use-previous":[s,e,c,"static/chunks/pages/hooks/use-previous-ec274840b068eda0.js"],"/hooks/use-queue":[s,e,c,"static/chunks/pages/hooks/use-queue-82c72f7451ce8dd5.js"],"/hooks/use-reduced-motion":[s,e,c,"static/chunks/pages/hooks/use-reduced-motion-3f7e2612e2d15c8a.js"],"/hooks/use-resize-observer":[s,e,c,"static/chunks/pages/hooks/use-resize-observer-dcdaebfe6625c7a8.js"],"/hooks/use-scroll-into-view":[s,e,c,"static/chunks/pages/hooks/use-scroll-into-view-7f10e118e6507817.js"],"/hooks/use-set-state":[s,e,c,"static/chunks/pages/hooks/use-set-state-7978c1afd5a50761.js"],"/hooks/use-shallow-effect":[s,e,c,"static/chunks/pages/hooks/use-shallow-effect-2a23600a5117eddc.js"],"/hooks/use-text-selection":[s,e,c,"static/chunks/pages/hooks/use-text-selection-d64f768b2561c2e6.js"],"/hooks/use-timeout":[s,e,c,"static/chunks/pages/hooks/use-timeout-bdc6d315b1e3c533.js"],"/hooks/use-toggle":[s,e,c,"static/chunks/pages/hooks/use-toggle-fb8f3fab86583da1.js"],"/hooks/use-uncontrolled":[s,e,c,"static/chunks/pages/hooks/use-uncontrolled-03c95ba36e5aca76.js"],"/hooks/use-validated-state":[s,e,c,"static/chunks/pages/hooks/use-validated-state-fc8998ad2148299f.js"],"/hooks/use-viewport-size":[s,e,c,"static/chunks/pages/hooks/use-viewport-size-6680ecfddbab061d.js"],"/hooks/use-window-event":[s,e,c,"static/chunks/pages/hooks/use-window-event-0c609bf56c040c05.js"],"/hooks/use-window-scroll":[s,e,c,"static/chunks/pages/hooks/use-window-scroll-94e1846e30b2f4e8.js"],"/others/carousel":[n,s,e,c,y,"static/chunks/pages/others/carousel-9f469c680cff716a.js"],"/others/code-highlight":[s,e,c,"static/chunks/pages/others/code-highlight-e7c1cfe8d37c7e48.js"],"/others/dropzone":["static/chunks/761-35955f10110e3a96.js",s,e,c,"static/css/297e354fa1f5a8f9.css","static/chunks/pages/others/dropzone-2f5faa4a1e839679.js"],"/others/modals":[s,e,c,"static/chunks/pages/others/modals-3796bd3b5eb149dd.js"],"/others/notifications":[s,e,c,"static/chunks/pages/others/notifications-8bdaa14feb703f1c.js"],"/others/nprogress":[s,e,c,"static/chunks/pages/others/nprogress-9339f0c6d1d60119.js"],"/others/spotlight":[s,e,c,"static/chunks/pages/others/spotlight-0f7a2d72c079d247.js"],"/others/tiptap":[g,l,"static/chunks/2799-aa8381ffc0207c6d.js",s,e,c,b,"static/chunks/pages/others/tiptap-16018d3dff2c9bf3.js"],"/overview":[s,e,c,x,"static/chunks/pages/overview-e68183f5eb291db4.js"],"/styles/color-functions":[s,e,c,"static/chunks/pages/styles/color-functions-b25b3bda5a5edf7d.js"],"/styles/css-files-list":[s,e,c,"static/chunks/pages/styles/css-files-list-26e30e6d8ad4f468.js"],"/styles/css-modules":[s,e,c,"static/chunks/pages/styles/css-modules-71ab5ac464180f3e.js"],"/styles/css-variables":[s,e,c,"static/chunks/pages/styles/css-variables-a901387ac3cc0aa4.js"],"/styles/css-variables-list":[s,e,c,"static/chunks/pages/styles/css-variables-list-872e863777de53b7.js"],"/styles/data-attributes":[s,e,c,"static/chunks/pages/styles/data-attributes-25cf7c4084961dfc.js"],"/styles/global-styles":[s,e,c,"static/chunks/pages/styles/global-styles-95fe47c111c99603.js"],"/styles/postcss-preset":[s,e,c,"static/chunks/pages/styles/postcss-preset-e3502a0aafaba69b.js"],"/styles/rem":[s,e,c,"static/chunks/pages/styles/rem-c5e0739c34aa0a91.js"],"/styles/responsive":[s,e,c,"static/chunks/pages/styles/responsive-750ebbfd489bd1ce.js"],"/styles/rtl":[s,e,c,"static/chunks/pages/styles/rtl-d40ddfbe0d505869.js"],"/styles/style":[s,e,c,"static/chunks/pages/styles/style-59c48df9291ab1af.js"],"/styles/style-props":[s,e,c,"static/chunks/pages/styles/style-props-1fb959cd43247984.js"],"/styles/styles-api":[s,e,c,"static/chunks/pages/styles/styles-api-5dbfd5697d009a06.js"],"/styles/styles-performance":[s,e,c,"static/chunks/pages/styles/styles-performance-0ae4bc47a8fe3491.js"],"/styles/unstyled":[s,e,c,"static/chunks/pages/styles/unstyled-f1dab855a1ec0cce.js"],"/styles/vanilla-extract":[s,e,c,"static/chunks/pages/styles/vanilla-extract-2d99f12f2f66ae75.js"],"/styles/variants-sizes":[s,e,c,"static/chunks/pages/styles/variants-sizes-c932d28197612170.js"],"/templates-usage":[s,e,c,"static/chunks/pages/templates-usage-8bb5f21805048000.js"],"/theming/color-schemes":[s,e,c,"static/chunks/pages/theming/color-schemes-c986bddd4d4fdcff.js"],"/theming/colors":[s,e,c,x,"static/chunks/pages/theming/colors-e98bfc4e145270b8.js"],"/theming/default-props":[s,e,c,"static/chunks/pages/theming/default-props-435f082c9754bd64.js"],"/theming/default-theme":[s,e,c,"static/chunks/pages/theming/default-theme-1e7f1a5eb268e915.js"],"/theming/mantine-provider":[s,e,c,"static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js"],"/theming/theme-object":[s,e,c,"static/chunks/pages/theming/theme-object-0376ae404aaa70a5.js"],"/theming/typography":[s,e,c,"static/chunks/pages/theming/typography-2397911cfc5ad29c.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/previous-versions","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/create-form-context","/form/errors","/form/nested","/form/recipes","/form/status","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mouse","/hooks/use-move","/hooks/use-network","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-text-selection","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/global-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography"]}}("static/chunks/1300-7220bd7f6a9c82f6.js","static/css/38da4a8345682411.css","static/chunks/178-67b6774636d9bfd4.js","static/chunks/3773-9b101a05417aee65.js","static/chunks/1757-14b12002dae37571.js","static/chunks/4485-54fa58b62686123b.js","static/chunks/8945-dced5d0b206191b0.js","static/chunks/4136-6fb5e5d743480d39.js","static/chunks/1080-f9995edff1a2d0ca.js","static/chunks/213-b3723d19cd82f7df.js","static/chunks/9935-a1af4e961299387a.js","static/chunks/7567-d1146e91d1df2c98.js","static/chunks/6-97d8f3d87523372c.js","static/chunks/1035-2078d70242b9f415.js","static/chunks/849baa33-4b0f9eb87903687b.js","static/chunks/2085-bfeaa2af84065661.js","static/chunks/2381-9c97f560cddb868b.js","static/chunks/8126-f58446ccde90abe6.js","static/chunks/7285-35f2fd967e6310ce.js","static/chunks/1347-e8c7bcc60db06dc5.js","static/chunks/9077-a05e7f12524f0a6d.js","static/chunks/9-1e1cb50a06718751.js","static/css/e5f75161ef22fdc6.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js b/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js
similarity index 100%
rename from _next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js
rename to _next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js
diff --git a/_next/static/chunks/1300-7220bd7f6a9c82f6.js b/_next/static/chunks/1300-7220bd7f6a9c82f6.js
new file mode 100644
index 00000000000..40748422466
--- /dev/null
+++ b/_next/static/chunks/1300-7220bd7f6a9c82f6.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1300],{8649:function(e,t,r){"use strict";r.d(t,{$:function(){return B}});var a=r(85893),n=r(67294),o=r(90512),l=r(51227),i=r(82827),s=r(46049),c=r(77048),d=r(74378),u=r(40624),b=r(55899),p=r(65623),m={socialButton:"m-fde4daed",socialButtonSection:"m-1df08738",discordButton:"m-6611c750",twitterButton:"m-a568e357"},f=r(95859),v=r(61830),y=Object.defineProperty,h=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,w=(e,t,r)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,O=(e,t)=>{for(var r in t||(t={}))g.call(t,r)&&w(e,r,t[r]);if(h)for(var r of h(t))k.call(t,r)&&w(e,r,t[r]);return e},j=(e,t)=>{var r={};for(var a in e)g.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&h)for(var a of h(e))0>t.indexOf(a)&&k.call(e,a)&&(r[a]=e[a]);return r};function x(e){var{icon:t}=e,r=j(e,["icon"]);return n.createElement(b.z,O({component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:t,radius:"md",classNames:{root:m.socialButton,section:m.socialButtonSection}},r))}function _(e){var{className:t}=e,r=j(e,["className"]);return n.createElement(x,O({className:(0,u.Z)(m.discordButton,t),icon:n.createElement(f.D,{size:16}),href:p.$.discordLink},r),"Join Discord community")}function N(e){var{className:t}=e,r=j(e,["className"]);return n.createElement(x,O({className:(0,u.Z)(m.twitterButton,t),icon:n.createElement(v.Z,{size:16}),href:p.$.twitterLink},r),"Follow Mantine on Twitter")}var P=r(93258),T=r(41664),S=r.n(T),E=r(16951),C=r.n(E);function F(e){let{data:t,title:r}=e,n=t.map((e,t)=>(0,a.jsx)(c.x,{className:C().link,component:"next"===e.type?S():"a",href:e.link,children:e.label},t));return(0,a.jsxs)("div",{className:C().wrapper,children:[(0,a.jsx)(c.x,{className:C().title,children:r}),n]})}let L=[{title:"About",data:[{type:"next",label:"Contribute",link:"/contribute"},{type:"next",label:"About Mantine",link:"/about"},{type:"next",label:"Changelog",link:"/changelog/previous-versions"},{type:"link",label:"Releases",link:p.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:p.$.discordLink},{type:"link",label:"Follow on Twitter",link:p.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:p.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:p.$.uiLink},{type:"link",label:"Documentation",link:p.$.docsLink},{type:"link",label:"Github organization",link:p.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:p.$.npmLink}]}];var z=r(80165),I=r.n(z);function B(e){let{withNavbar:t}=e,r=L.map(e=>(0,a.jsx)(F,{data:e.data,title:e.title},e.title));return(0,a.jsxs)("div",{className:I().root,children:[(0,a.jsx)("div",{className:I().spacer}),(0,a.jsx)(l.x,{mod:{"with-navbar":t},className:(0,o.Z)(I().wrapper,i.Z.classNames.fullWidth),children:(0,a.jsxs)(s.W,{size:1100,children:[(0,a.jsxs)("div",{className:I().inner,children:[(0,a.jsxs)("div",{className:I().logoSection,children:[(0,a.jsx)(P.T,{}),(0,a.jsx)(c.x,{className:I().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,a.jsx)("div",{className:I().groups,children:r})]}),(0,a.jsx)("div",{className:I().afterFooter,children:(0,a.jsxs)(d.Z,{justify:"space-between",wrap:"wrap",children:[(0,a.jsxs)(c.x,{fz:"xs",className:I().afterFooterNote,children:["Built by ",(0,a.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,a.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,a.jsxs)("div",{className:I().social,children:[(0,a.jsx)(_,{className:I().socialButton}),(0,a.jsx)(N,{className:I().socialButton})]})]})})]})})]})}},80165:function(e){e.exports={root:"Footer_root__bgmye",spacer:"Footer_spacer__g_thI",wrapper:"Footer_wrapper__chorF",inner:"Footer_inner__Oczlu",logoSection:"Footer_logoSection__VUxg4",description:"Footer_description__b7YOg",title:"Footer_title___pDUp",afterFooter:"Footer_afterFooter__FyXNP",afterFooterNote:"Footer_afterFooterNote__9yART",groups:"Footer_groups__nLTK6",social:"Footer_social__0m1yX",socialButton:"Footer_socialButton__zLzIx"}},16951:function(e){e.exports={wrapper:"LinksGroup_wrapper__54pi4",link:"LinksGroup_link__cg684",title:"LinksGroup_title__maicr"}},46049:function(e,t,r){"use strict";r.d(t,{W:function(){return k}});var a=r(67294),n={root:"m-7485cace"},o=r(75144),l=r(35577),i=r(25637),s=r(51227),c=r(95553),d=r(71350),u=Object.defineProperty,b=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,f=(e,t,r)=>t in e?u(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,v=(e,t)=>{for(var r in t||(t={}))p.call(t,r)&&f(e,r,t[r]);if(b)for(var r of b(t))m.call(t,r)&&f(e,r,t[r]);return e},y=(e,t)=>{var r={};for(var a in e)p.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&b)for(var a of b(e))0>t.indexOf(a)&&m.call(e,a)&&(r[a]=e[a]);return r};let h={},g=(0,c.Z)((e,{size:t})=>({root:{"--container-size":(0,d.ap)(t,"container-size")}})),k=(0,o.d)((e,t)=>{let r=(0,l.w)("Container",h,e),{classNames:o,className:c,style:d,styles:u,unstyled:b,vars:p,fluid:m}=r,f=y(r,["classNames","className","style","styles","unstyled","vars","fluid"]),k=(0,i.y)({name:"Container",classes:n,props:r,className:c,style:d,classNames:o,styles:u,unstyled:b,vars:p,varsResolver:g});return a.createElement(s.x,v(v({ref:t,mod:{fluid:m}},k("root")),f))});k.classes=n,k.displayName="@mantine/core/Container"},3995:function(e,t,r){"use strict";r.d(t,{m:function(){return em}});var a=r(67294),n=r(32582),o=r(35179),l=r(16371);let[i,s]=(0,l.R)("Tabs component was not found in the tree");var c={root:"m-89d60db1","list--default":"m-576c9d4",list:"m-89d33d6d",panel:"m-b0c91715",tab:"m-4ec4dce6",tabSection:"m-fc420b1f","tab--default":"m-539e827b","list--outline":"m-6772fbd5","tab--outline":"m-b59ab47c","tab--pills":"m-c3381914"},d=r(75144),u=r(35577),b=r(51227),p=Object.defineProperty,m=Object.defineProperties,f=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,g=(e,t,r)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,k=(e,t)=>{for(var r in t||(t={}))y.call(t,r)&&g(e,r,t[r]);if(v)for(var r of v(t))h.call(t,r)&&g(e,r,t[r]);return e},w=(e,t)=>m(e,f(t)),O=(e,t)=>{var r={};for(var a in e)y.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&v)for(var a of v(e))0>t.indexOf(a)&&h.call(e,a)&&(r[a]=e[a]);return r};let j={},x=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsList",j,e),{children:n,className:o,grow:l,justify:i,classNames:c,styles:d,style:p}=r,m=O(r,["children","className","grow","justify","classNames","styles","style"]),f=s();return a.createElement(b.x,w(k(k({},m),f.getStyles("list",{className:o,style:p,classNames:c,styles:d,props:r,variant:f.variant})),{ref:t,role:"tablist",variant:f.variant,mod:{grow:l,orientation:f.orientation,placement:"vertical"===f.orientation&&f.placement,inverted:f.inverted},"aria-orientation":f.orientation,__vars:{"--tabs-justify":i}}),n)});x.classes=c,x.displayName="@mantine/core/TabsList";var _=Object.defineProperty,N=Object.defineProperties,P=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,C=(e,t,r)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,F=(e,t)=>{for(var r in t||(t={}))S.call(t,r)&&C(e,r,t[r]);if(T)for(var r of T(t))E.call(t,r)&&C(e,r,t[r]);return e},L=(e,t)=>N(e,P(t)),z=(e,t)=>{var r={};for(var a in e)S.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&T)for(var a of T(e))0>t.indexOf(a)&&E.call(e,a)&&(r[a]=e[a]);return r};let I={},B=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsPanel",I,e),{children:n,className:o,value:l,classNames:i,styles:c,style:d}=r,p=z(r,["children","className","value","classNames","styles","style"]),m=s(),f=m.value===l,v=m.keepMounted?n:f?n:null;return a.createElement(b.x,L(F(F({},p),m.getStyles("panel",{className:o,classNames:i,styles:c,style:[d,f?void 0:{display:"none"}],props:r})),{ref:t,mod:{orientation:m.orientation},role:"tabpanel",id:m.getPanelId(l),"aria-labelledby":m.getTabId(l)}),v)});B.classes=c,B.displayName="@mantine/core/TabsPanel";var $=r(90395),D=r(49441),Z=r(9149),M=r(94975),W=r(93955),A=Object.defineProperty,R=Object.defineProperties,G=Object.getOwnPropertyDescriptors,K=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,U=(e,t,r)=>t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,X=(e,t)=>{for(var r in t||(t={}))H.call(t,r)&&U(e,r,t[r]);if(K)for(var r of K(t))V.call(t,r)&&U(e,r,t[r]);return e},q=(e,t)=>R(e,G(t)),J=(e,t)=>{var r={};for(var a in e)H.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&K)for(var a of K(e))0>t.indexOf(a)&&V.call(e,a)&&(r[a]=e[a]);return r};let Y={},Q=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsTab",Y,e),{className:n,children:o,rightSection:l,leftSection:i,value:c,onClick:d,onKeyDown:b,disabled:p,color:m,style:f,classNames:v,styles:y,vars:h}=r,g=J(r,["className","children","rightSection","leftSection","value","onClick","onKeyDown","disabled","color","style","classNames","styles","vars"]),k=(0,D.rZ)(),{dir:w}=(0,Z.gm)(),O=s(),j=c===O.value,x=e=>{O.onChange(O.allowTabDeactivation&&c===O.value?null:c),null==d||d(e)},_={classNames:v,styles:y,props:r};return a.createElement($.k,q(X(X({},g),O.getStyles("tab",X({className:n,style:f,variant:O.variant},_))),{disabled:p,unstyled:O.unstyled,variant:O.variant,mod:{active:j,disabled:p,orientation:O.orientation,inverted:O.inverted,placement:"vertical"===O.orientation&&O.placement},ref:t,role:"tab",id:O.getTabId(c),"aria-selected":j,tabIndex:j||null===O.value?0:-1,"aria-controls":O.getPanelId(c),onClick:x,__vars:{"--tabs-color":m?(0,M.p)(m,k):void 0},onKeyDown:(0,W.R)({siblingSelector:'[role="tab"]',parentSelector:'[role="tablist"]',activateOnFocus:O.activateTabWithKeyboard,loop:O.loop,orientation:O.orientation||"horizontal",dir:w,onKeyDown:b})}),i&&a.createElement("span",q(X({},O.getStyles("tabSection",_)),{"data-position":"left"}),i),o&&a.createElement("span",X({},O.getStyles("tabLabel",_)),o),l&&a.createElement("span",q(X({},O.getStyles("tabSection",_)),{"data-position":"right"}),l))});Q.classes=c,Q.displayName="@mantine/core/TabsTab";var ee=r(25637),et=r(35486),er=r(95553),ea=r(71350),en=Object.defineProperty,eo=Object.getOwnPropertySymbols,el=Object.prototype.hasOwnProperty,ei=Object.prototype.propertyIsEnumerable,es=(e,t,r)=>t in e?en(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ec=(e,t)=>{for(var r in t||(t={}))el.call(t,r)&&es(e,r,t[r]);if(eo)for(var r of eo(t))ei.call(t,r)&&es(e,r,t[r]);return e},ed=(e,t)=>{var r={};for(var a in e)el.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&eo)for(var a of eo(e))0>t.indexOf(a)&&ei.call(e,a)&&(r[a]=e[a]);return r};let eu="Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value",eb={keepMounted:!0,orientation:"horizontal",loop:!0,activateTabWithKeyboard:!0,allowTabDeactivation:!1,unstyled:!1,inverted:!1,variant:"default",placement:"left"},ep=(0,er.Z)((e,{radius:t,color:r})=>({root:{"--tabs-radius":(0,ea.H5)(t),"--tabs-color":(0,M.p)(r,e)}})),em=(0,d.d)((e,t)=>{let r=(0,u.w)("Tabs",eb,e),{defaultValue:l,value:s,onChange:d,orientation:p,children:m,loop:f,id:v,activateTabWithKeyboard:y,allowTabDeactivation:h,variant:g,color:k,radius:w,inverted:O,placement:j,keepMounted:x,classNames:_,styles:N,unstyled:P,className:T,style:S,vars:E}=r,C=ed(r,["defaultValue","value","onChange","orientation","children","loop","id","activateTabWithKeyboard","allowTabDeactivation","variant","color","radius","inverted","placement","keepMounted","classNames","styles","unstyled","className","style","vars"]),F=(0,n.M)(v),[L,z]=(0,o.C)({value:s,defaultValue:l,finalValue:null,onChange:d}),I=(0,ee.y)({name:"Tabs",props:r,classes:c,className:T,style:S,classNames:_,styles:N,unstyled:P,vars:E,varsResolver:ep});return a.createElement(i,{value:{placement:j,value:L,orientation:p,id:F,loop:f,activateTabWithKeyboard:y,getTabId:(0,et.A)(`${F}-tab`,eu),getPanelId:(0,et.A)(`${F}-panel`,eu),onChange:z,allowTabDeactivation:h,variant:g,color:k,radius:w,inverted:O,keepMounted:x,unstyled:P,getStyles:I}},a.createElement(b.x,ec(ec({ref:t,id:F,variant:g,mod:{orientation:p,inverted:"horizontal"===p&&O,placement:"vertical"===p&&j}},I("root")),C),m))});em.classes=c,em.displayName="@mantine/core/Tabs",em.Tab=Q,em.Panel=B,em.List=x},35486:function(e,t,r){"use strict";function a(e,t){return r=>{if("string"!=typeof r||0===r.trim().length)throw Error(t);return`${e}-${r}`}}r.d(t,{A:function(){return a}})},61830:function(e,t,r){"use strict";r.d(t,{Z:function(){return b}});var a=r(67294),n=r(46393),o=Object.defineProperty,l=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,c=(e,t,r)=>t in e?o(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,d=(e,t)=>{for(var r in t||(t={}))i.call(t,r)&&c(e,r,t[r]);if(l)for(var r of l(t))s.call(t,r)&&c(e,r,t[r]);return e},u=(e,t)=>{var r={};for(var a in e)i.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&l)for(var a of l(e))0>t.indexOf(a)&&s.call(e,a)&&(r[a]=e[a]);return r};function b(e){var{size:t,style:r}=e,o=u(e,["size","style"]);return a.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:d({width:(0,n.h)(t),height:(0,n.h)(t)},r)},o),a.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}},1287:function(e,t,r){"use strict";r.d(t,{a:function(){return a}});let a={selectors:{root:"Root element",label:"Thumb label",thumb:"Thumb element",trackContainer:"Wraps track element",track:"Slider track",bar:"Track filled part",markWrapper:"Contains `mark` and `markLabel` elements",mark:"Mark displayed on track",markLabel:"Label of the associated mark, displayed below track"},vars:{root:{"--slider-size":"Controls track `height`","--slider-color":"Controls filled track, thumb and marks `background`","--slider-thumb-size":"Controls thumb `width` and `height`","--slider-radius":"Controls `border-radius` of track and thumb"}},modifiers:[{modifier:"data-disabled",selector:["trackContainer","track","bar","thumb","mark"],condition:"`disabled` prop is set"},{modifier:"data-inverted",selector:["track","bar"],condition:"`inverted` prop is set"},{modifier:"data-dragging",selector:"thumb",condition:"slider is being dragged"},{modifier:"data-filled",selector:"mark",condition:"mark position is less or equal slider value"}]}}}]);
\ No newline at end of file
diff --git a/_next/static/chunks/1300-a1599e086a440f9c.js b/_next/static/chunks/1300-a1599e086a440f9c.js
deleted file mode 100644
index d321ecec294..00000000000
--- a/_next/static/chunks/1300-a1599e086a440f9c.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1300],{8649:function(e,t,r){"use strict";r.d(t,{$:function(){return B}});var a=r(85893),n=r(67294),o=r(90512),l=r(51227),i=r(82827),s=r(46049),c=r(77048),d=r(74378),u=r(40624),b=r(55899),p=r(65623),m={socialButton:"m-fde4daed",socialButtonSection:"m-1df08738",discordButton:"m-6611c750",twitterButton:"m-a568e357"},f=r(95859),y=r(61830),v=Object.defineProperty,h=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,w=(e,t,r)=>t in e?v(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,O=(e,t)=>{for(var r in t||(t={}))g.call(t,r)&&w(e,r,t[r]);if(h)for(var r of h(t))k.call(t,r)&&w(e,r,t[r]);return e},j=(e,t)=>{var r={};for(var a in e)g.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&h)for(var a of h(e))0>t.indexOf(a)&&k.call(e,a)&&(r[a]=e[a]);return r};function x(e){var{icon:t}=e,r=j(e,["icon"]);return n.createElement(b.z,O({component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:t,radius:"md",classNames:{root:m.socialButton,section:m.socialButtonSection}},r))}function _(e){var{className:t}=e,r=j(e,["className"]);return n.createElement(x,O({className:(0,u.Z)(m.discordButton,t),icon:n.createElement(f.D,{size:16}),href:p.$.discordLink},r),"Join Discord community")}function N(e){var{className:t}=e,r=j(e,["className"]);return n.createElement(x,O({className:(0,u.Z)(m.twitterButton,t),icon:n.createElement(y.Z,{size:16}),href:p.$.twitterLink},r),"Follow Mantine on Twitter")}var P=r(93258),T=r(41664),S=r.n(T),E=r(16951),C=r.n(E);function F(e){let{data:t,title:r}=e,n=t.map((e,t)=>(0,a.jsx)(c.x,{className:C().link,component:"next"===e.type?S():"a",href:e.link,children:e.label},t));return(0,a.jsxs)("div",{className:C().wrapper,children:[(0,a.jsx)(c.x,{className:C().title,children:r}),n]})}let L=[{title:"About",data:[{type:"next",label:"Contribute",link:"/pages/contributing/"},{type:"next",label:"About Mantine",link:"/pages/about/"},{type:"next",label:"Changelog",link:"/pages/changelog/"},{type:"link",label:"Releases",link:p.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:p.$.discordLink},{type:"link",label:"Follow on Twitter",link:p.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:p.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:p.$.uiLink},{type:"link",label:"Documentation",link:p.$.docsLink},{type:"link",label:"Github organization",link:p.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:p.$.npmLink}]}];var z=r(80165),I=r.n(z);function B(e){let{withNavbar:t}=e,r=L.map(e=>(0,a.jsx)(F,{data:e.data,title:e.title},e.title));return(0,a.jsxs)("div",{className:I().root,children:[(0,a.jsx)("div",{className:I().spacer}),(0,a.jsx)(l.x,{mod:{"with-navbar":t},className:(0,o.Z)(I().wrapper,i.Z.classNames.fullWidth),children:(0,a.jsxs)(s.W,{size:1100,children:[(0,a.jsxs)("div",{className:I().inner,children:[(0,a.jsxs)("div",{className:I().logoSection,children:[(0,a.jsx)(P.T,{}),(0,a.jsx)(c.x,{className:I().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,a.jsx)("div",{className:I().groups,children:r})]}),(0,a.jsx)("div",{className:I().afterFooter,children:(0,a.jsxs)(d.Z,{justify:"space-between",wrap:"wrap",children:[(0,a.jsxs)(c.x,{fz:"xs",className:I().afterFooterNote,children:["Built by ",(0,a.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,a.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,a.jsxs)("div",{className:I().social,children:[(0,a.jsx)(_,{className:I().socialButton}),(0,a.jsx)(N,{className:I().socialButton})]})]})})]})})]})}},80165:function(e){e.exports={root:"Footer_root__bgmye",spacer:"Footer_spacer__g_thI",wrapper:"Footer_wrapper__chorF",inner:"Footer_inner__Oczlu",logoSection:"Footer_logoSection__VUxg4",description:"Footer_description__b7YOg",title:"Footer_title___pDUp",afterFooter:"Footer_afterFooter__FyXNP",afterFooterNote:"Footer_afterFooterNote__9yART",groups:"Footer_groups__nLTK6",social:"Footer_social__0m1yX",socialButton:"Footer_socialButton__zLzIx"}},16951:function(e){e.exports={wrapper:"LinksGroup_wrapper__54pi4",link:"LinksGroup_link__cg684",title:"LinksGroup_title__maicr"}},46049:function(e,t,r){"use strict";r.d(t,{W:function(){return k}});var a=r(67294),n={root:"m-7485cace"},o=r(75144),l=r(35577),i=r(25637),s=r(51227),c=r(95553),d=r(71350),u=Object.defineProperty,b=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,f=(e,t,r)=>t in e?u(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,y=(e,t)=>{for(var r in t||(t={}))p.call(t,r)&&f(e,r,t[r]);if(b)for(var r of b(t))m.call(t,r)&&f(e,r,t[r]);return e},v=(e,t)=>{var r={};for(var a in e)p.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&b)for(var a of b(e))0>t.indexOf(a)&&m.call(e,a)&&(r[a]=e[a]);return r};let h={},g=(0,c.Z)((e,{size:t})=>({root:{"--container-size":(0,d.ap)(t,"container-size")}})),k=(0,o.d)((e,t)=>{let r=(0,l.w)("Container",h,e),{classNames:o,className:c,style:d,styles:u,unstyled:b,vars:p,fluid:m}=r,f=v(r,["classNames","className","style","styles","unstyled","vars","fluid"]),k=(0,i.y)({name:"Container",classes:n,props:r,className:c,style:d,classNames:o,styles:u,unstyled:b,vars:p,varsResolver:g});return a.createElement(s.x,y(y({ref:t,mod:{fluid:m}},k("root")),f))});k.classes=n,k.displayName="@mantine/core/Container"},3995:function(e,t,r){"use strict";r.d(t,{m:function(){return em}});var a=r(67294),n=r(32582),o=r(35179),l=r(16371);let[i,s]=(0,l.R)("Tabs component was not found in the tree");var c={root:"m-89d60db1","list--default":"m-576c9d4",list:"m-89d33d6d",panel:"m-b0c91715",tab:"m-4ec4dce6",tabSection:"m-fc420b1f","tab--default":"m-539e827b","list--outline":"m-6772fbd5","tab--outline":"m-b59ab47c","tab--pills":"m-c3381914"},d=r(75144),u=r(35577),b=r(51227),p=Object.defineProperty,m=Object.defineProperties,f=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,g=(e,t,r)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,k=(e,t)=>{for(var r in t||(t={}))v.call(t,r)&&g(e,r,t[r]);if(y)for(var r of y(t))h.call(t,r)&&g(e,r,t[r]);return e},w=(e,t)=>m(e,f(t)),O=(e,t)=>{var r={};for(var a in e)v.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&y)for(var a of y(e))0>t.indexOf(a)&&h.call(e,a)&&(r[a]=e[a]);return r};let j={},x=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsList",j,e),{children:n,className:o,grow:l,justify:i,classNames:c,styles:d,style:p}=r,m=O(r,["children","className","grow","justify","classNames","styles","style"]),f=s();return a.createElement(b.x,w(k(k({},m),f.getStyles("list",{className:o,style:p,classNames:c,styles:d,props:r,variant:f.variant})),{ref:t,role:"tablist",variant:f.variant,mod:{grow:l,orientation:f.orientation,placement:"vertical"===f.orientation&&f.placement,inverted:f.inverted},"aria-orientation":f.orientation,__vars:{"--tabs-justify":i}}),n)});x.classes=c,x.displayName="@mantine/core/TabsList";var _=Object.defineProperty,N=Object.defineProperties,P=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,C=(e,t,r)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,F=(e,t)=>{for(var r in t||(t={}))S.call(t,r)&&C(e,r,t[r]);if(T)for(var r of T(t))E.call(t,r)&&C(e,r,t[r]);return e},L=(e,t)=>N(e,P(t)),z=(e,t)=>{var r={};for(var a in e)S.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&T)for(var a of T(e))0>t.indexOf(a)&&E.call(e,a)&&(r[a]=e[a]);return r};let I={},B=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsPanel",I,e),{children:n,className:o,value:l,classNames:i,styles:c,style:d}=r,p=z(r,["children","className","value","classNames","styles","style"]),m=s(),f=m.value===l,y=m.keepMounted?n:f?n:null;return a.createElement(b.x,L(F(F({},p),m.getStyles("panel",{className:o,classNames:i,styles:c,style:[d,f?void 0:{display:"none"}],props:r})),{ref:t,mod:{orientation:m.orientation},role:"tabpanel",id:m.getPanelId(l),"aria-labelledby":m.getTabId(l)}),y)});B.classes=c,B.displayName="@mantine/core/TabsPanel";var $=r(90395),D=r(49441),Z=r(9149),M=r(94975),W=r(93955),A=Object.defineProperty,R=Object.defineProperties,G=Object.getOwnPropertyDescriptors,K=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,U=(e,t,r)=>t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,X=(e,t)=>{for(var r in t||(t={}))H.call(t,r)&&U(e,r,t[r]);if(K)for(var r of K(t))V.call(t,r)&&U(e,r,t[r]);return e},q=(e,t)=>R(e,G(t)),J=(e,t)=>{var r={};for(var a in e)H.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&K)for(var a of K(e))0>t.indexOf(a)&&V.call(e,a)&&(r[a]=e[a]);return r};let Y={},Q=(0,d.d)((e,t)=>{let r=(0,u.w)("TabsTab",Y,e),{className:n,children:o,rightSection:l,leftSection:i,value:c,onClick:d,onKeyDown:b,disabled:p,color:m,style:f,classNames:y,styles:v,vars:h}=r,g=J(r,["className","children","rightSection","leftSection","value","onClick","onKeyDown","disabled","color","style","classNames","styles","vars"]),k=(0,D.rZ)(),{dir:w}=(0,Z.gm)(),O=s(),j=c===O.value,x=e=>{O.onChange(O.allowTabDeactivation&&c===O.value?null:c),null==d||d(e)},_={classNames:y,styles:v,props:r};return a.createElement($.k,q(X(X({},g),O.getStyles("tab",X({className:n,style:f,variant:O.variant},_))),{disabled:p,unstyled:O.unstyled,variant:O.variant,mod:{active:j,disabled:p,orientation:O.orientation,inverted:O.inverted,placement:"vertical"===O.orientation&&O.placement},ref:t,role:"tab",id:O.getTabId(c),"aria-selected":j,tabIndex:j||null===O.value?0:-1,"aria-controls":O.getPanelId(c),onClick:x,__vars:{"--tabs-color":m?(0,M.p)(m,k):void 0},onKeyDown:(0,W.R)({siblingSelector:'[role="tab"]',parentSelector:'[role="tablist"]',activateOnFocus:O.activateTabWithKeyboard,loop:O.loop,orientation:O.orientation||"horizontal",dir:w,onKeyDown:b})}),i&&a.createElement("span",q(X({},O.getStyles("tabSection",_)),{"data-position":"left"}),i),o&&a.createElement("span",X({},O.getStyles("tabLabel",_)),o),l&&a.createElement("span",q(X({},O.getStyles("tabSection",_)),{"data-position":"right"}),l))});Q.classes=c,Q.displayName="@mantine/core/TabsTab";var ee=r(25637),et=r(35486),er=r(95553),ea=r(71350),en=Object.defineProperty,eo=Object.getOwnPropertySymbols,el=Object.prototype.hasOwnProperty,ei=Object.prototype.propertyIsEnumerable,es=(e,t,r)=>t in e?en(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ec=(e,t)=>{for(var r in t||(t={}))el.call(t,r)&&es(e,r,t[r]);if(eo)for(var r of eo(t))ei.call(t,r)&&es(e,r,t[r]);return e},ed=(e,t)=>{var r={};for(var a in e)el.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&eo)for(var a of eo(e))0>t.indexOf(a)&&ei.call(e,a)&&(r[a]=e[a]);return r};let eu="Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value",eb={keepMounted:!0,orientation:"horizontal",loop:!0,activateTabWithKeyboard:!0,allowTabDeactivation:!1,unstyled:!1,inverted:!1,variant:"default",placement:"left"},ep=(0,er.Z)((e,{radius:t,color:r})=>({root:{"--tabs-radius":(0,ea.H5)(t),"--tabs-color":(0,M.p)(r,e)}})),em=(0,d.d)((e,t)=>{let r=(0,u.w)("Tabs",eb,e),{defaultValue:l,value:s,onChange:d,orientation:p,children:m,loop:f,id:y,activateTabWithKeyboard:v,allowTabDeactivation:h,variant:g,color:k,radius:w,inverted:O,placement:j,keepMounted:x,classNames:_,styles:N,unstyled:P,className:T,style:S,vars:E}=r,C=ed(r,["defaultValue","value","onChange","orientation","children","loop","id","activateTabWithKeyboard","allowTabDeactivation","variant","color","radius","inverted","placement","keepMounted","classNames","styles","unstyled","className","style","vars"]),F=(0,n.M)(y),[L,z]=(0,o.C)({value:s,defaultValue:l,finalValue:null,onChange:d}),I=(0,ee.y)({name:"Tabs",props:r,classes:c,className:T,style:S,classNames:_,styles:N,unstyled:P,vars:E,varsResolver:ep});return a.createElement(i,{value:{placement:j,value:L,orientation:p,id:F,loop:f,activateTabWithKeyboard:v,getTabId:(0,et.A)(`${F}-tab`,eu),getPanelId:(0,et.A)(`${F}-panel`,eu),onChange:z,allowTabDeactivation:h,variant:g,color:k,radius:w,inverted:O,keepMounted:x,unstyled:P,getStyles:I}},a.createElement(b.x,ec(ec({ref:t,id:F,variant:g,mod:{orientation:p,inverted:"horizontal"===p&&O,placement:"vertical"===p&&j}},I("root")),C),m))});em.classes=c,em.displayName="@mantine/core/Tabs",em.Tab=Q,em.Panel=B,em.List=x},35486:function(e,t,r){"use strict";function a(e,t){return r=>{if("string"!=typeof r||0===r.trim().length)throw Error(t);return`${e}-${r}`}}r.d(t,{A:function(){return a}})},61830:function(e,t,r){"use strict";r.d(t,{Z:function(){return b}});var a=r(67294),n=r(46393),o=Object.defineProperty,l=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,c=(e,t,r)=>t in e?o(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,d=(e,t)=>{for(var r in t||(t={}))i.call(t,r)&&c(e,r,t[r]);if(l)for(var r of l(t))s.call(t,r)&&c(e,r,t[r]);return e},u=(e,t)=>{var r={};for(var a in e)i.call(e,a)&&0>t.indexOf(a)&&(r[a]=e[a]);if(null!=e&&l)for(var a of l(e))0>t.indexOf(a)&&s.call(e,a)&&(r[a]=e[a]);return r};function b(e){var{size:t,style:r}=e,o=u(e,["size","style"]);return a.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:d({width:(0,n.h)(t),height:(0,n.h)(t)},r)},o),a.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}},1287:function(e,t,r){"use strict";r.d(t,{a:function(){return a}});let a={selectors:{root:"Root element",label:"Thumb label",thumb:"Thumb element",trackContainer:"Wraps track element",track:"Slider track",bar:"Track filled part",markWrapper:"Contains `mark` and `markLabel` elements",mark:"Mark displayed on track",markLabel:"Label of the associated mark, displayed below track"},vars:{root:{"--slider-size":"Controls track `height`","--slider-color":"Controls filled track, thumb and marks `background`","--slider-thumb-size":"Controls thumb `width` and `height`","--slider-radius":"Controls `border-radius` of track and thumb"}},modifiers:[{modifier:"data-disabled",selector:["trackContainer","track","bar","thumb","mark"],condition:"`disabled` prop is set"},{modifier:"data-inverted",selector:["track","bar"],condition:"`inverted` prop is set"},{modifier:"data-dragging",selector:"thumb",condition:"slider is being dragged"},{modifier:"data-filled",selector:"mark",condition:"mark position is less or equal slider value"}]}}}]);
\ No newline at end of file
diff --git a/_next/static/chunks/main-6b495e28bfbaa813.js b/_next/static/chunks/main-6b495e28bfbaa813.js
deleted file mode 100644
index c2b9d72e5a9..00000000000
--- a/_next/static/chunks/main-6b495e28bfbaa813.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{60932:function(e,t){"use strict";function r(e,t,r,n,a,o,i){try{var l=e[o](i),s=l.value}catch(e){r(e);return}l.done?t(s):Promise.resolve(s).then(n,a)}function n(e){return function(){var t=this,n=arguments;return new Promise(function(a,o){var i=e.apply(t,n);function l(e){r(i,a,o,l,s,"next",e)}function s(e){r(i,a,o,l,s,"throw",e)}l(void 0)})}}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},6495:function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(){return r.apply(this,arguments)}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},92648:function(e,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return r}})},91598:function(e,t){"use strict";function r(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(r=function(e){return e?n:t})(e)}function n(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=r(t);if(n&&n.has(e))return n.get(e);var a={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var l=o?Object.getOwnPropertyDescriptor(e,i):null;l&&(l.get||l.set)?Object.defineProperty(a,i,l):a[i]=e[i]}return a.default=e,n&&n.set(e,a),a}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},17273:function(e,t){"use strict";function r(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return r}})},40037:function(){"trimStart"in String.prototype||(String.prototype.trimStart=String.prototype.trimLeft),"trimEnd"in String.prototype||(String.prototype.trimEnd=String.prototype.trimRight),"description"in Symbol.prototype||Object.defineProperty(Symbol.prototype,"description",{configurable:!0,get:function(){var e=/\((.*)\)/.exec(this.toString());return e?e[1]:void 0}}),Array.prototype.flat||(Array.prototype.flat=function(e,t){return t=this.concat.apply([],this),e>1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then(function(r){return t.resolve(e()).then(function(){return r})},function(r){return t.resolve(e()).then(function(){throw r})})}),Object.fromEntries||(Object.fromEntries=function(e){return Array.from(e).reduce(function(e,t){return e[t[0]]=t[1],e},{})})},33468:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addBasePath=function(e,t){return a.normalizePathTrailingSlash(n.addPathPrefix(e,""))};var n=r(44135),a=r(52700);("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)},54465:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addLocale=void 0,r(52700),t.addLocale=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e},("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)},84643:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.detectDomainLocale=void 0,t.detectDomainLocale=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r]},("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)},10928:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.hasBasePath=function(e){return n.pathHasPrefix(e,"")};var n=r(93210);("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)},31831:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return{mountedInstances:new Set,updateHead:e=>{let t={};e.forEach(e=>{if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'.concat(e.props["data-href"],'"]')))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}let r=t[e.type]||[];r.push(e),t[e.type]=r});let r=t.title?t.title[0]:null,o="";if(r){let{children:e}=r.props;o="string"==typeof e?e:Array.isArray(e)?e.join(""):""}o!==document.title&&(document.title=o),["meta","base","link","style","script"].forEach(e=>{(function(e,t){let r=document.getElementsByTagName("head")[0],o=r.querySelector("meta[name=next-head-count]"),i=Number(o.content),l=[];for(let t=0,r=o.previousElementSibling;t<i;t++,r=(null==r?void 0:r.previousElementSibling)||null){var s;(null==r?void 0:null==(s=r.tagName)?void 0:s.toLowerCase())===e&&l.push(r)}let u=t.map(n).filter(e=>{for(let t=0,r=l.length;t<r;t++){let r=l[t];if(a(r,e))return l.splice(t,1),!1}return!0});l.forEach(e=>{var t;return null==(t=e.parentNode)?void 0:t.removeChild(e)}),u.forEach(e=>r.insertBefore(e,o)),o.content=(i-l.length+u.length).toString()})(e,t[e]||[])})}}},t.isEqualNode=a,t.DOMAttributeNames=void 0;let r={acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",noModule:"noModule"};function n(e){let{type:t,props:n}=e,a=document.createElement(t);for(let e in n){if(!n.hasOwnProperty(e)||"children"===e||"dangerouslySetInnerHTML"===e||void 0===n[e])continue;let o=r[e]||e.toLowerCase();"script"===t&&("async"===o||"defer"===o||"noModule"===o)?a[o]=!!n[e]:a.setAttribute(o,n[e])}let{children:o,dangerouslySetInnerHTML:i}=n;return i?a.innerHTML=i.__html||"":o&&(a.textContent="string"==typeof o?o:Array.isArray(o)?o.join(""):""),a}function a(e,t){if(e instanceof HTMLElement&&t instanceof HTMLElement){let r=t.getAttribute("nonce");if(r&&!e.getAttribute("nonce")){let n=t.cloneNode(!0);return n.setAttribute("nonce",""),n.nonce=r,r===e.nonce&&e.isEqualNode(n)}}return e.isEqualNode(t)}t.DOMAttributeNames=r,("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)},84534:function(e,t,r){"use strict";let n,a,o,i,l,s,u,c,d,f,p,h;Object.defineProperty(t,"__esModule",{value:!0});let m=r(91598).Z;Object.defineProperty(t,"__esModule",{value:!0}),t.initialize=function(){return V.apply(this,arguments)},t.hydrate=function(e){return es.apply(this,arguments)},t.emitter=t.router=t.version=void 0;var g=r(60932).Z,y=r(6495).Z,v=r(92648).Z;r(91598).Z,r(40037);var _=v(r(67294)),P=v(r(20745)),b=r(4664),S=v(r(8550)),w=r(72692),E=r(4146),x=r(86238),j=r(94919),C=r(86949),O=r(670),R=r(17345),M=v(r(31831)),A=v(r(70976)),L=v(r(659)),T=r(18483),I=r(80880),N=r(80676),k=r(28730),D=r(82813),B=r(10928),U=r(48245),H=r(60401),F=r(78914),q=v(r(86954));t.version="13.2.1",t.router=n;let W=S.default();t.emitter=W;let Z=e=>[].slice.call(e),z=!1;self.__next_require__=r;class G extends _.default.Component{componentDidCatch(e,t){this.props.fn(e,t)}componentDidMount(){this.scrollToHash(),n.isSsr&&(a.isFallback||a.nextExport&&(x.isDynamicRoute(n.pathname)||location.search||z)||a.props&&a.props.__N_SSG&&(location.search||z))&&n.replace(n.pathname+"?"+String(j.assign(j.urlQueryToSearchParams(n.query),new URLSearchParams(location.search))),o,{_h:1,shallow:!a.isFallback&&!z}).catch(e=>{if(!e.cancelled)throw e})}componentDidUpdate(){this.scrollToHash()}scrollToHash(){let{hash:e}=location;if(!(e=e&&e.substring(1)))return;let t=document.getElementById(e);t&&setTimeout(()=>t.scrollIntoView(),0)}render(){return this.props.children}}function V(){return(V=g(function*(){arguments.length>0&&void 0!==arguments[0]&&arguments[0],a=JSON.parse(document.getElementById("__NEXT_DATA__").textContent),window.__NEXT_DATA__=a,h=a.defaultLocale;let e=a.assetPrefix||"";if(r.p="".concat(e,"/_next/"),C.setConfig({serverRuntimeConfig:{},publicRuntimeConfig:a.runtimeConfig||{}}),o=O.getURL(),B.hasBasePath(o)&&(o=D.removeBasePath(o)),a.scriptLoader){let{initScriptLoader:e}=r(63573);e(a.scriptLoader)}i=new A.default(a.buildId,e);let t=e=>{let[t,r]=e;return i.routeLoader.onEntrypoint(t,r)};return window.__NEXT_P&&window.__NEXT_P.map(e=>setTimeout(()=>t(e),0)),window.__NEXT_P=[],window.__NEXT_P.push=t,(s=M.default()).getIsSsr=()=>n.isSsr,l=document.getElementById("__next"),{assetPrefix:e}})).apply(this,arguments)}function X(e,t){return _.default.createElement(e,Object.assign({},t))}function Y(e){var t;let{children:r}=e;return _.default.createElement(G,{fn:e=>K({App:d,err:e}).catch(e=>console.error("Error rendering page: ",e))},_.default.createElement(U.AppRouterContext.Provider,{value:H.adaptForAppRouterInstance(n)},_.default.createElement(F.SearchParamsContext.Provider,{value:H.adaptForSearchParams(n)},_.default.createElement(H.PathnameContextProviderAdapter,{router:n,isAutoExport:null!=(t=self.__NEXT_DATA__.autoExport)&&t},_.default.createElement(w.RouterContext.Provider,{value:I.makePublicRouterInstance(n)},_.default.createElement(b.HeadManagerContext.Provider,{value:s},_.default.createElement(k.ImageConfigContext.Provider,{value:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1}},r)))))))}let $=e=>t=>{let r=y({},t,{Component:p,err:a.err,router:n});return _.default.createElement(Y,null,X(e,r))};function K(e){let{App:t,err:l}=e;return console.error(l),console.error("A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred"),i.loadPage("/_error").then(n=>{let{page:a,styleSheets:o}=n;return(null==u?void 0:u.Component)===a?Promise.resolve().then(()=>m(r(97345))).then(n=>Promise.resolve().then(()=>m(r(74297))).then(r=>(t=r.default,e.App=t,n))).then(e=>({ErrorComponent:e.default,styleSheets:[]})):{ErrorComponent:a,styleSheets:o}}).then(r=>{var i;let{ErrorComponent:s,styleSheets:u}=r,c=$(t),d={Component:s,AppTree:c,router:n,ctx:{err:l,pathname:a.page,query:a.query,asPath:o,AppTree:c}};return Promise.resolve((null==(i=e.props)?void 0:i.err)?e.props:O.loadGetInitialProps(t,d)).then(t=>eo(y({},e,{err:l,Component:s,styleSheets:u,props:t})))})}function J(e){let{callback:t}=e;return _.default.useLayoutEffect(()=>t(),[t]),null}let Q=null,ee=!0;function et(){["beforeRender","afterHydrate","afterRender","routeChange"].forEach(e=>performance.clearMarks(e))}function er(){O.ST&&(performance.mark("afterHydrate"),performance.measure("Next.js-before-hydration","navigationStart","beforeRender"),performance.measure("Next.js-hydration","beforeRender","afterHydrate"),f&&performance.getEntriesByName("Next.js-hydration").forEach(f),et())}function en(){if(!O.ST)return;performance.mark("afterRender");let e=performance.getEntriesByName("routeChange","mark");e.length&&(performance.measure("Next.js-route-change-to-render",e[0].name,"beforeRender"),performance.measure("Next.js-render","beforeRender","afterRender"),f&&(performance.getEntriesByName("Next.js-render").forEach(f),performance.getEntriesByName("Next.js-route-change-to-render").forEach(f)),et(),["Next.js-route-change-to-render","Next.js-render"].forEach(e=>performance.clearMeasures(e)))}function ea(e){let{callbacks:t,children:r}=e;return _.default.useLayoutEffect(()=>t.forEach(e=>e()),[t]),_.default.useEffect(()=>{L.default(f)},[]),r}function eo(e){let t,{App:r,Component:a,props:o,err:i}=e,s="initial"in e?void 0:e.styleSheets;a=a||u.Component,o=o||u.props;let d=y({},o,{Component:a,err:i,router:n});u=d;let f=!1,p=new Promise((e,r)=>{c&&c(),t=()=>{c=null,e()},c=()=>{f=!0,c=null;let e=Error("Cancel rendering route");e.cancelled=!0,r(e)}});function h(){t()}!function(){if(!s)return;let e=Z(document.querySelectorAll("style[data-n-href]")),t=new Set(e.map(e=>e.getAttribute("data-n-href"))),r=document.querySelector("noscript[data-n-css]"),n=null==r?void 0:r.getAttribute("data-n-css");s.forEach(e=>{let{href:r,text:a}=e;if(!t.has(r)){let e=document.createElement("style");e.setAttribute("data-n-href",r),e.setAttribute("media","x"),n&&e.setAttribute("nonce",n),document.head.appendChild(e),e.appendChild(document.createTextNode(a))}})}();let m=_.default.createElement(_.default.Fragment,null,_.default.createElement(J,{callback:function(){if(s&&!f){let e=new Set(s.map(e=>e.href)),t=Z(document.querySelectorAll("style[data-n-href]")),r=t.map(e=>e.getAttribute("data-n-href"));for(let n=0;n<r.length;++n)e.has(r[n])?t[n].removeAttribute("media"):t[n].setAttribute("media","x");let n=document.querySelector("noscript[data-n-css]");n&&s.forEach(e=>{let{href:t}=e,r=document.querySelector('style[data-n-href="'.concat(t,'"]'));r&&(n.parentNode.insertBefore(r,n.nextSibling),n=r)}),Z(document.querySelectorAll("link[data-n-p]")).forEach(e=>{e.parentNode.removeChild(e)})}if(e.scroll){let{x:t,y:r}=e.scroll;E.handleSmoothScroll(()=>{window.scrollTo(t,r)})}}}),_.default.createElement(Y,null,X(r,d),_.default.createElement(R.Portal,{type:"next-route-announcer"},_.default.createElement(T.RouteAnnouncer,null))));return!function(e,t){O.ST&&performance.mark("beforeRender");let r=t(ee?er:en);if(Q){let e=_.default.startTransition;e(()=>{Q.render(r)})}else Q=P.default.hydrateRoot(e,r,{onRecoverableError:q.default}),ee=!1}(l,e=>_.default.createElement(ea,{callbacks:[e,h]},_.default.createElement(_.default.StrictMode,null,m))),p}function ei(e){return el.apply(this,arguments)}function el(){return(el=g(function*(e){if(e.err){yield K(e);return}try{yield eo(e)}catch(r){let t=N.getProperError(r);if(t.cancelled)throw t;yield K(y({},e,{err:t}))}})).apply(this,arguments)}function es(){return(es=g(function*(e){let r=a.err;try{let e=yield i.routeLoader.whenEntrypoint("/_app");if("error"in e)throw e.error;let{component:t,exports:r}=e;d=t,r&&r.reportWebVitals&&(f=e=>{let t,{id:n,name:a,startTime:o,value:i,duration:l,entryType:s,entries:u,attribution:c}=e,d="".concat(Date.now(),"-").concat(Math.floor(Math.random()*(9e12-1))+1e12);u&&u.length&&(t=u[0].startTime);let f={id:n||d,name:a,startTime:o||t,value:null==i?l:i,label:"mark"===s||"measure"===s?"custom":"web-vital"};c&&(f.attribution=c),r.reportWebVitals(f)});let n=yield i.routeLoader.whenEntrypoint(a.page);if("error"in n)throw n.error;p=n.component}catch(e){r=N.getProperError(e)}window.__NEXT_PRELOADREADY&&(yield window.__NEXT_PRELOADREADY(a.dynamicIds)),t.router=n=I.createRouter(a.page,a.query,o,{initialProps:a.props,pageLoader:i,App:d,Component:p,wrapApp:$,err:r,isFallback:Boolean(a.isFallback),subscription:(e,t,r)=>ei(Object.assign({},e,{App:t,scroll:r})),locale:a.locale,locales:a.locales,defaultLocale:h,domainLocales:a.domainLocales,isPreview:a.isPreview}),z=yield n._initialMatchesMiddlewarePromise;let l={App:d,initial:!0,Component:p,props:a.props,err:r};(null==e?void 0:e.beforeRender)&&(yield e.beforeRender()),ei(l)})).apply(this,arguments)}("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)},21783:function(e,t,r){"use strict";var n=r(84534);window.next={version:n.version,get router(){return n.router},emitter:n.emitter},n.initialize({}).then(()=>n.hydrate()).catch(console.error),("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)},52700:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizePathTrailingSlash=void 0;var n=r(40012),a=r(26727);let o=e=>{if(!e.startsWith("/"))return e;let{pathname:t,query:r,hash:o}=a.parsePath(e);return"".concat(n.removeTrailingSlash(t)).concat(r).concat(o)};t.normalizePathTrailingSlash=o,("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)},86954:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let r=e.digest||t.digest,a="function"==typeof reportError?reportError:e=>{window.console.error(e)};r!==n.NEXT_DYNAMIC_NO_SSR_CODE&&a(e)};var n=r(75680);("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)},70976:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=r(92648).Z,a=r(33468),o=r(18074),i=n(r(27929)),l=r(54465),s=r(86238),u=r(22864),c=r(40012),d=r(82497);t.default=class{getPageList(){return d.getClientBuildManifest().then(e=>e.sortedPages)}getMiddleware(){return window.__MIDDLEWARE_MATCHERS=[],window.__MIDDLEWARE_MATCHERS}getDataHref(e){let{asPath:t,href:r,locale:n}=e,{pathname:d,query:f,search:p}=u.parseRelativeUrl(r),{pathname:h}=u.parseRelativeUrl(t),m=c.removeTrailingSlash(d);if("/"!==m[0])throw Error('Route name should start with a "/", got "'.concat(m,'"'));return(e=>{let t=i.default(c.removeTrailingSlash(l.addLocale(e,n)),".json");return a.addBasePath("/_next/data/".concat(this.buildId).concat(t).concat(p),!0)})(e.skipInterpolation?h:s.isDynamicRoute(m)?o.interpolateAs(d,h,f).result:m)}_isSsg(e){return this.promisedSsgManifest.then(t=>t.has(e))}loadPage(e){return this.routeLoader.loadRoute(e).then(e=>{if("component"in e)return{page:e.component,mod:e.exports,styleSheets:e.styles.map(e=>({href:e.href,text:e.content}))};throw e.error})}prefetch(e){return this.routeLoader.prefetch(e)}constructor(e,t){this.routeLoader=d.createRouteLoader(t),this.buildId=e,this.assetPrefix=t,this.promisedSsgManifest=new Promise(e=>{window.__SSG_MANIFEST?e(window.__SSG_MANIFEST):window.__SSG_MANIFEST_CB=()=>{e(window.__SSG_MANIFEST)}})}},("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)},659:function(e,t,r){"use strict";let n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;let a=["CLS","FCP","FID","INP","LCP","TTFB"];location.href;let o=!1;function i(e){n&&n(e)}var l=e=>{if(n=e,!o)for(let e of(o=!0,a))try{let t;t||(t=r(78018)),t["on".concat(e)](i)}catch(t){console.warn("Failed to track ".concat(e," web-vital"),t)}};t.default=l,("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)},17345:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Portal=void 0;var n=r(67294),a=r(73935);let o=e=>{let{children:t,type:r}=e,[o,i]=n.useState(null);return n.useEffect(()=>{let e=document.createElement(r);return document.body.appendChild(e),i(e),()=>{document.body.removeChild(e)}},[r]),o?a.createPortal(t,o):null};t.Portal=o,("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)},82813:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeBasePath=function(e){return(e=e.slice(0)).startsWith("/")||(e="/".concat(e)),e},r(10928),("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)},66876:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeLocale=function(e,t){return e},r(26727),("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)},44686:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.cancelIdleCallback=t.requestIdleCallback=void 0;let r="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let t=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)};t.requestIdleCallback=r;let n="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};t.cancelIdleCallback=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)},18483:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.RouteAnnouncer=void 0;var n=(0,r(92648).Z)(r(67294)),a=r(80880);let o={border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"},i=()=>{let{asPath:e}=a.useRouter(),[t,r]=n.default.useState(""),i=n.default.useRef(e);return n.default.useEffect(()=>{if(i.current!==e){if(i.current=e,document.title)r(document.title);else{var t;let n=document.querySelector("h1"),a=null!=(t=null==n?void 0:n.innerText)?t:null==n?void 0:n.textContent;r(a||e)}}},[e]),n.default.createElement("p",{"aria-live":"assertive",id:"__next-route-announcer__",role:"alert",style:o},t)};t.RouteAnnouncer=i,t.default=i,("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)},82497:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.markAssetError=l,t.isAssetError=function(e){return e&&i in e},t.getClientBuildManifest=c,t.createRouteLoader=function(e){let t=new Map,r=new Map,n=new Map,i=new Map;function c(e){{var t;let n=r.get(e.toString());return n||(document.querySelector('script[src^="'.concat(e,'"]'))?Promise.resolve():(r.set(e.toString(),n=new Promise((r,n)=>{(t=document.createElement("script")).onload=r,t.onerror=()=>n(l(Error("Failed to load script: ".concat(e)))),t.crossOrigin=void 0,t.src=e,document.body.appendChild(t)})),n))}}function f(e){let t=n.get(e);return t||n.set(e,t=fetch(e).then(t=>{if(!t.ok)throw Error("Failed to load stylesheet: ".concat(e));return t.text().then(t=>({href:e,content:t}))}).catch(e=>{throw l(e)})),t}return{whenEntrypoint:e=>o(e,t),onEntrypoint(e,r){(r?Promise.resolve().then(()=>r()).then(e=>({component:e&&e.default||e,exports:e}),e=>({error:e})):Promise.resolve(void 0)).then(r=>{let n=t.get(e);n&&"resolve"in n?r&&(t.set(e,r),n.resolve(r)):(r?t.set(e,r):t.delete(e),i.delete(e))})},loadRoute(r,n){return o(r,i,()=>{let a;return u(d(e,r).then(e=>{let{scripts:n,css:a}=e;return Promise.all([t.has(r)?[]:Promise.all(n.map(c)),Promise.all(a.map(f))])}).then(e=>this.whenEntrypoint(r).then(t=>({entrypoint:t,styles:e[1]}))),3800,l(Error("Route did not complete loading: ".concat(r)))).then(e=>{let{entrypoint:t,styles:r}=e,n=Object.assign({styles:r},t);return"error"in t?t:n}).catch(e=>{if(n)throw e;return{error:e}}).finally(()=>null==a?void 0:a())})},prefetch(t){let r;return(r=navigator.connection)&&(r.saveData||/2g/.test(r.effectiveType))?Promise.resolve():d(e,t).then(e=>Promise.all(s?e.scripts.map(e=>{var t,r,n;return t=e.toString(),r="script",new Promise((e,a)=>{let o='\n      link[rel="prefetch"][href^="'.concat(t,'"],\n      link[rel="preload"][href^="').concat(t,'"],\n      script[src^="').concat(t,'"]');if(document.querySelector(o))return e();n=document.createElement("link"),r&&(n.as=r),n.rel="prefetch",n.crossOrigin=void 0,n.onload=e,n.onerror=()=>a(l(Error("Failed to prefetch: ".concat(t)))),n.href=t,document.head.appendChild(n)})}):[])).then(()=>{a.requestIdleCallback(()=>this.loadRoute(t,!0).catch(()=>{}))}).catch(()=>{})}}},(0,r(92648).Z)(r(27929));var n=r(65407),a=r(44686);function o(e,t,r){let n,a=t.get(e);if(a)return"future"in a?a.future:Promise.resolve(a);let o=new Promise(e=>{n=e});return t.set(e,a={resolve:n,future:o}),r?r().then(e=>(n(e),e)).catch(r=>{throw t.delete(e),r}):o}let i=Symbol("ASSET_LOAD_ERROR");function l(e){return Object.defineProperty(e,i,{})}let s=function(e){try{return e=document.createElement("link"),!!window.MSInputMethodContext&&!!document.documentMode||e.relList.supports("prefetch")}catch(e){return!1}}();function u(e,t,r){return new Promise((n,o)=>{let i=!1;e.then(e=>{i=!0,n(e)}).catch(o),a.requestIdleCallback(()=>setTimeout(()=>{i||o(r)},t))})}function c(){if(self.__BUILD_MANIFEST)return Promise.resolve(self.__BUILD_MANIFEST);let e=new Promise(e=>{let t=self.__BUILD_MANIFEST_CB;self.__BUILD_MANIFEST_CB=()=>{e(self.__BUILD_MANIFEST),t&&t()}});return u(e,3800,l(Error("Failed to load client build manifest")))}function d(e,t){return c().then(r=>{if(!(t in r))throw l(Error("Failed to lookup route: ".concat(t)));let a=r[t].map(t=>e+"/_next/"+encodeURI(t));return{scripts:a.filter(e=>e.endsWith(".js")).map(e=>n.__unsafeCreateTrustedScriptURL(e)),css:a.filter(e=>e.endsWith(".css"))}})}("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)},80880:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Router",{enumerable:!0,get:function(){return o.default}}),Object.defineProperty(t,"withRouter",{enumerable:!0,get:function(){return s.default}}),t.useRouter=function(){let e=a.default.useContext(i.RouterContext);if(!e)throw Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");return e},t.createRouter=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return u.router=new o.default(...t),u.readyCallbacks.forEach(e=>e()),u.readyCallbacks=[],u.router},t.makePublicRouterInstance=function(e){let t={};for(let r of c){if("object"==typeof e[r]){t[r]=Object.assign(Array.isArray(e[r])?[]:{},e[r]);continue}t[r]=e[r]}return t.events=o.default.events,d.forEach(r=>{t[r]=function(){for(var t=arguments.length,n=Array(t),a=0;a<t;a++)n[a]=arguments[a];return e[r](...n)}}),t},t.default=void 0;var n=r(92648).Z,a=n(r(67294)),o=n(r(41003)),i=r(72692),l=n(r(80676)),s=n(r(49977));let u={router:null,readyCallbacks:[],ready(e){if(this.router)return e();this.readyCallbacks.push(e)}},c=["pathname","route","query","asPath","components","isFallback","basePath","locale","locales","defaultLocale","isReady","isPreview","isLocaleDomain","domainLocales"],d=["push","replace","reload","back","prefetch","beforePopState"];function f(){if(!u.router)throw Error('No router instance found.\nYou should only use "next/router" on the client side of your app.\n');return u.router}Object.defineProperty(u,"events",{get:()=>o.default.events}),c.forEach(e=>{Object.defineProperty(u,e,{get(){let t=f();return t[e]}})}),d.forEach(e=>{u[e]=function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];let a=f();return a[e](...r)}}),["routeChangeStart","beforeHistoryChange","routeChangeComplete","routeChangeError","hashChangeStart","hashChangeComplete"].forEach(e=>{u.ready(()=>{o.default.events.on(e,function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];let a="on".concat(e.charAt(0).toUpperCase()).concat(e.substring(1));if(u[a])try{u[a](...r)}catch(e){console.error("Error when running the Router event: ".concat(a)),console.error(l.default(e)?"".concat(e.message,"\n").concat(e.stack):e+"")}})})}),t.default=u,("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)},63573:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleClientScriptLoad=g,t.initScriptLoader=function(e){e.forEach(g),function(){let e=[...document.querySelectorAll('[data-nscript="beforeInteractive"]'),...document.querySelectorAll('[data-nscript="beforePageRender"]')];e.forEach(e=>{let t=e.id||e.getAttribute("src");p.add(t)})}()},t.default=void 0;var n=r(6495).Z,a=r(92648).Z,o=r(91598).Z,i=r(17273).Z,l=a(r(73935)),s=o(r(67294)),u=r(4664),c=r(31831),d=r(44686);let f=new Map,p=new Set,h=["onLoad","onReady","dangerouslySetInnerHTML","children","onError","strategy"],m=e=>{let{src:t,id:r,onLoad:n=()=>{},onReady:a=null,dangerouslySetInnerHTML:o,children:i="",strategy:l="afterInteractive",onError:s}=e,u=r||t;if(u&&p.has(u))return;if(f.has(t)){p.add(u),f.get(t).then(n,s);return}let d=()=>{a&&a(),p.add(u)},m=document.createElement("script"),g=new Promise((e,t)=>{m.addEventListener("load",function(t){e(),n&&n.call(this,t),d()}),m.addEventListener("error",function(e){t(e)})}).catch(function(e){s&&s(e)});for(let[r,n]of(o?(m.innerHTML=o.__html||"",d()):i?(m.textContent="string"==typeof i?i:Array.isArray(i)?i.join(""):"",d()):t&&(m.src=t,f.set(t,g)),Object.entries(e))){if(void 0===n||h.includes(r))continue;let e=c.DOMAttributeNames[r]||r.toLowerCase();m.setAttribute(e,n)}"worker"===l&&m.setAttribute("type","text/partytown"),m.setAttribute("data-nscript",l),document.body.appendChild(m)};function g(e){let{strategy:t="afterInteractive"}=e;"lazyOnload"===t?window.addEventListener("load",()=>{d.requestIdleCallback(()=>m(e))}):m(e)}function y(e){let{id:t,src:r="",onLoad:a=()=>{},onReady:o=null,strategy:c="afterInteractive",onError:f}=e,h=i(e,["id","src","onLoad","onReady","strategy","onError"]),{updateScripts:g,scripts:y,getIsSsr:v,appDir:_,nonce:P}=s.useContext(u.HeadManagerContext),b=s.useRef(!1);s.useEffect(()=>{let e=t||r;b.current||(o&&e&&p.has(e)&&o(),b.current=!0)},[o,t,r]);let S=s.useRef(!1);if(s.useEffect(()=>{!S.current&&("afterInteractive"===c?m(e):"lazyOnload"===c&&("complete"===document.readyState?d.requestIdleCallback(()=>m(e)):window.addEventListener("load",()=>{d.requestIdleCallback(()=>m(e))})),S.current=!0)},[e,c]),("beforeInteractive"===c||"worker"===c)&&(g?(y[c]=(y[c]||[]).concat([n({id:t,src:r,onLoad:a,onReady:o,onError:f},h)]),g(y)):v&&v()?p.add(t||r):v&&!v()&&m(e)),_){if("beforeInteractive"===c)return r?(l.default.preload(r,h.integrity?{as:"script",integrity:h.integrity}:{as:"script"}),s.default.createElement("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push(".concat(JSON.stringify([r]),")")}})):(h.dangerouslySetInnerHTML&&(h.children=h.dangerouslySetInnerHTML.__html,delete h.dangerouslySetInnerHTML),s.default.createElement("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push(".concat(JSON.stringify([0,n({},h)]),")")}}));"afterInteractive"===c&&r&&l.default.preload(r,h.integrity?{as:"script",integrity:h.integrity}:{as:"script"})}return null}Object.defineProperty(y,"__nextScript",{value:!0}),t.default=y,("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)},65407:function(e,t){"use strict";let r;Object.defineProperty(t,"__esModule",{value:!0}),t.__unsafeCreateTrustedScriptURL=function(e){var t;return(null==(t=function(){if(void 0===r){var e;r=(null==(e=window.trustedTypes)?void 0:e.createPolicy("nextjs",{createHTML:e=>e,createScript:e=>e,createScriptURL:e=>e}))||null}return r}())?void 0:t.createScriptURL(e))||e},("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)},49977:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){function t(t){return n.default.createElement(e,Object.assign({router:a.useRouter()},t))}return t.getInitialProps=e.getInitialProps,t.origGetInitialProps=e.origGetInitialProps,t};var n=(0,r(92648).Z)(r(67294)),a=r(80880);("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)},74297:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,a=r(60932).Z,o=(0,r(92648).Z)(r(67294)),i=r(670);function l(e){return s.apply(this,arguments)}function s(){return(s=a(function*(e){let{Component:t,ctx:r}=e,n=yield i.loadGetInitialProps(t,r);return{pageProps:n}})).apply(this,arguments)}class u extends(n=o.default.Component){render(){let{Component:e,pageProps:t}=this.props;return o.default.createElement(e,Object.assign({},t))}}u.origGetInitialProps=l,u.getInitialProps=l,t.default=u,("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)},97345:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,a=r(92648).Z,o=a(r(67294)),i=a(r(83121));let l={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"};function s(e){let{res:t,err:r}=e,n=t&&t.statusCode?t.statusCode:r?r.statusCode:404;return{statusCode:n}}let u={error:{fontFamily:'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left"},h1:{display:"inline-block",margin:"0 20px 0 0",paddingRight:23,fontSize:24,fontWeight:500,verticalAlign:"top",lineHeight:"49px"},h2:{fontSize:14,fontWeight:400,lineHeight:"49px",margin:0}};class c extends(n=o.default.Component){render(){let{statusCode:e,withDarkMode:t=!0}=this.props,r=this.props.title||l[e]||"An unexpected error has occurred";return o.default.createElement("div",{style:u.error},o.default.createElement(i.default,null,o.default.createElement("title",null,e?"".concat(e,": ").concat(r):"Application error: a client-side exception has occurred")),o.default.createElement("div",null,o.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}".concat(t?"@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}":"")}}),e?o.default.createElement("h1",{className:"next-error-h1",style:u.h1},e):null,o.default.createElement("div",{style:u.desc},o.default.createElement("h2",{style:u.h2},this.props.title||e?r:o.default.createElement(o.default.Fragment,null,"Application error: a client-side exception has occurred (see the browser console for more information)"),"."))))}}c.displayName="ErrorPage",c.getInitialProps=s,c.origGetInitialProps=s,t.default=c,("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)},40610:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.AmpStateContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext({});t.AmpStateContext=a},40532:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isInAmpMode=function(){let{ampFirst:e=!1,hybrid:t=!1,hasQuery:r=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e||t&&r}},48245:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TemplateContext=t.GlobalLayoutRouterContext=t.LayoutRouterContext=t.AppRouterContext=t.CacheStates=void 0;var n,a,o=(0,r(92648).Z)(r(67294));t.CacheStates=n,(a=n||(t.CacheStates=n={})).LAZY_INITIALIZED="LAZYINITIALIZED",a.DATA_FETCH="DATAFETCH",a.READY="READY";let i=o.default.createContext(null);t.AppRouterContext=i;let l=o.default.createContext(null);t.LayoutRouterContext=l;let s=o.default.createContext(null);t.GlobalLayoutRouterContext=s;let u=o.default.createContext(null);t.TemplateContext=u},18659:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.escapeStringRegexp=function(e){return r.test(e)?e.replace(n,"\\$&"):e};let r=/[|\\{}()[\]^$+*?.-]/,n=/[|\\{}()[\]^$+*?.-]/g},4664:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.HeadManagerContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext({});t.HeadManagerContext=a},83121:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.defaultHead=c,t.default=void 0;var n=r(6495).Z,a=r(92648).Z,o=(0,r(91598).Z)(r(67294)),i=a(r(31436)),l=r(40610),s=r(4664),u=r(40532);function c(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[o.default.createElement("meta",{charSet:"utf-8"})];return e||t.push(o.default.createElement("meta",{name:"viewport",content:"width=device-width"})),t}function d(e,t){return"string"==typeof t||"number"==typeof t?e:t.type===o.default.Fragment?e.concat(o.default.Children.toArray(t.props.children).reduce((e,t)=>"string"==typeof t||"number"==typeof t?e:e.concat(t),[])):e.concat(t)}r(57238);let f=["name","httpEquiv","charSet","itemProp"];function p(e,t){let{inAmpMode:r}=t;return e.reduce(d,[]).reverse().concat(c(r).reverse()).filter(function(){let e=new Set,t=new Set,r=new Set,n={};return a=>{let o=!0,i=!1;if(a.key&&"number"!=typeof a.key&&a.key.indexOf("$")>0){i=!0;let t=a.key.slice(a.key.indexOf("$")+1);e.has(t)?o=!1:e.add(t)}switch(a.type){case"title":case"base":t.has(a.type)?o=!1:t.add(a.type);break;case"meta":for(let e=0,t=f.length;e<t;e++){let t=f[e];if(a.props.hasOwnProperty(t)){if("charSet"===t)r.has(t)?o=!1:r.add(t);else{let e=a.props[t],r=n[t]||new Set;("name"!==t||!i)&&r.has(e)?o=!1:(r.add(e),n[t]=r)}}}}return o}}()).reverse().map((e,t)=>{let a=e.key||t;if(!r&&"link"===e.type&&e.props.href&&["https://fonts.googleapis.com/css","https://use.typekit.net/"].some(t=>e.props.href.startsWith(t))){let t=n({},e.props||{});return t["data-href"]=t.href,t.href=void 0,t["data-optimized-fonts"]=!0,o.default.cloneElement(e,t)}return o.default.cloneElement(e,{key:a})})}t.default=function(e){let{children:t}=e,r=o.useContext(l.AmpStateContext),n=o.useContext(s.HeadManagerContext);return o.default.createElement(i.default,{reduceComponentsToState:p,headManager:n,inAmpMode:u.isInAmpMode(r)},t)},("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)},78914:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LayoutSegmentsContext=t.ParamsContext=t.PathnameContext=t.SearchParamsContext=void 0;var n=r(67294);let a=n.createContext(null);t.SearchParamsContext=a;let o=n.createContext(null);t.PathnameContext=o;let i=n.createContext(null);t.ParamsContext=i;let l=n.createContext(null);t.LayoutSegmentsContext=l},24769:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizeLocalePath=function(e,t){let r;let n=e.split("/");return(t||[]).some(t=>!!n[1]&&n[1].toLowerCase()===t.toLowerCase()&&(r=t,n.splice(1,1),e=n.join("/")||"/",!0)),{pathname:e,detectedLocale:r}}},28730:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ImageConfigContext=void 0;var n=(0,r(92648).Z)(r(67294)),a=r(10139);let o=n.default.createContext(a.imageConfigDefault);t.ImageConfigContext=o},10139:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.imageConfigDefault=t.VALID_LOADERS=void 0,t.VALID_LOADERS=["default","imgix","cloudinary","akamai","custom"],t.imageConfigDefault={deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",loaderFile:"",domains:[],disableStaticImages:!1,minimumCacheTTL:60,formats:["image/webp"],dangerouslyAllowSVG:!1,contentSecurityPolicy:"script-src 'none'; frame-src 'none'; sandbox;",contentDispositionType:"inline",remotePatterns:[],unoptimized:!1}},82849:function(e,t){"use strict";function r(e){return Object.prototype.toString.call(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.getObjectClassLabel=r,t.isPlainObject=function(e){if("[object Object]"!==r(e))return!1;let t=Object.getPrototypeOf(e);return null===t||t.hasOwnProperty("isPrototypeOf")}},75680:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NEXT_DYNAMIC_NO_SSR_CODE=void 0,t.NEXT_DYNAMIC_NO_SSR_CODE="DYNAMIC_SERVER_USAGE"},8550:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){let e=Object.create(null);return{on(t,r){(e[t]||(e[t]=[])).push(r)},off(t,r){e[t]&&e[t].splice(e[t].indexOf(r)>>>0,1)},emit(t){for(var r=arguments.length,n=Array(r>1?r-1:0),a=1;a<r;a++)n[a-1]=arguments[a];(e[t]||[]).slice().map(e=>{e(...n)})}}}},6301:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.denormalizePagePath=function(e){let t=a.normalizePathSep(e);return t.startsWith("/index/")&&!n.isDynamicRoute(t)?t.slice(6):"/index"!==t?t:"/"};var n=r(18588),a=r(49997)},49997:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizePathSep=function(e){return e.replace(/\\/g,"/")}},72692:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.RouterContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext(null);t.RouterContext=a},60401:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.adaptForAppRouterInstance=function(e){return{back(){e.back()},forward(){e.forward()},refresh(){e.reload()},push(t){e.push(t)},replace(t){e.replace(t)},prefetch(t){e.prefetch(t)}}},t.adaptForSearchParams=function(e){return e.isReady&&e.query?function(e){let t=new URLSearchParams;for(let[r,n]of Object.entries(e))if(Array.isArray(n))for(let e of n)t.append(r,e);else void 0!==n&&t.append(r,n);return t}(e.query):new URLSearchParams},t.PathnameContextProviderAdapter=function(e){var{children:t,router:r}=e,n=a(e,["children","router"]);let s=o.useRef(n.isAutoExport),u=o.useMemo(()=>{let e;let t=s.current;if(t&&(s.current=!1),l.isDynamicRoute(r.pathname)&&(r.isFallback||t&&!r.isReady))return null;try{e=new URL(r.asPath,"http://f")}catch(e){return"/"}return e.pathname},[r.asPath,r.isFallback,r.isReady,r.pathname]);return o.default.createElement(i.PathnameContext.Provider,{value:u},t)};var n=r(91598).Z,a=r(17273).Z,o=n(r(67294)),i=r(78914),l=r(18588)},41003:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.matchesMiddleware=D,t.createKey=V,t.default=void 0;var n=r(60932).Z,a=r(6495).Z,o=r(92648).Z,i=r(91598).Z,l=r(40012),s=r(82497),u=r(63573),c=i(r(80676)),d=r(6301),f=r(24769),p=o(r(8550)),h=r(670),m=r(86238),g=r(22864);o(r(72431));var y=r(13156),v=r(54903),_=r(67795);r(84643);var P=r(26727),b=r(54465),S=r(66876),w=r(82813),E=r(33468),x=r(10928),j=r(79423),C=r(18756),O=r(57429),R=r(79002),M=r(62139),A=r(21754),L=r(17562),T=r(1978),I=r(18074),N=r(4146);function k(){return Object.assign(Error("Route Cancelled"),{cancelled:!0})}function D(e){return B.apply(this,arguments)}function B(){return(B=n(function*(e){let t=yield Promise.resolve(e.router.pageLoader.getMiddleware());if(!t)return!1;let{pathname:r}=P.parsePath(e.asPath),n=x.hasBasePath(r)?w.removeBasePath(r):r,a=E.addBasePath(b.addLocale(n,e.locale));return t.some(e=>RegExp(e.regexp).test(a))})).apply(this,arguments)}function U(e){let t=h.getLocationOrigin();return e.startsWith(t)?e.substring(t.length):e}function H(e,t,r){let[n,a]=T.resolveHref(e,t,!0),o=h.getLocationOrigin(),i=n.startsWith(o),l=a&&a.startsWith(o);n=U(n),a=a?U(a):a;let s=i?n:E.addBasePath(n),u=r?U(T.resolveHref(e,r)):a||n;return{url:s,as:l?u:E.addBasePath(u)}}function F(e,t){let r=l.removeTrailingSlash(d.denormalizePagePath(e));return"/404"===r||"/_error"===r?e:(t.includes(r)||t.some(t=>{if(m.isDynamicRoute(t)&&v.getRouteRegex(t).re.test(r))return e=t,!0}),l.removeTrailingSlash(e))}function q(e){return W.apply(this,arguments)}function W(){return(W=n(function*(e){let t=yield D(e);if(!t||!e.fetchData)return null;try{let t=yield e.fetchData(),r=yield function(e,t,r){let n={basePath:r.router.basePath,i18n:{locales:r.router.locales},trailingSlash:Boolean(!1)},o=t.headers.get("x-nextjs-rewrite"),i=o||t.headers.get("x-nextjs-matched-path"),u=t.headers.get("x-matched-path");if(!u||i||u.includes("__next_data_catchall")||u.includes("/_error")||u.includes("/404")||(i=u),i){if(i.startsWith("/")){let t=g.parseRelativeUrl(i),a=C.getNextPathnameInfo(t.pathname,{nextConfig:n,parseData:!0}),u=l.removeTrailingSlash(a.pathname);return Promise.all([r.router.pageLoader.getPageList(),s.getClientBuildManifest()]).then(n=>{let[i,{__rewrites:l}]=n,s=b.addLocale(a.pathname,a.locale);if(m.isDynamicRoute(s)||!o&&i.includes(f.normalizeLocalePath(w.removeBasePath(s),r.router.locales).pathname)){let r=C.getNextPathnameInfo(g.parseRelativeUrl(e).pathname,{parseData:!0});s=E.addBasePath(r.pathname),t.pathname=s}if(!i.includes(u)){let e=F(u,i);e!==u&&(u=e)}let c=i.includes(u)?u:F(f.normalizeLocalePath(w.removeBasePath(t.pathname),r.router.locales).pathname,i);if(m.isDynamicRoute(c)){let e=y.getRouteMatcher(v.getRouteRegex(c))(s);Object.assign(t.query,e||{})}return{type:"rewrite",parsedAs:t,resolvedHref:c}})}let t=P.parsePath(e),u=O.formatNextPathnameInfo(a({},C.getNextPathnameInfo(t.pathname,{nextConfig:n,parseData:!0}),{defaultLocale:r.router.defaultLocale,buildId:""}));return Promise.resolve({type:"redirect-external",destination:"".concat(u).concat(t.query).concat(t.hash)})}let c=t.headers.get("x-nextjs-redirect");if(c){if(c.startsWith("/")){let e=P.parsePath(c),t=O.formatNextPathnameInfo(a({},C.getNextPathnameInfo(e.pathname,{nextConfig:n,parseData:!0}),{defaultLocale:r.router.defaultLocale,buildId:""}));return Promise.resolve({type:"redirect-internal",newAs:"".concat(t).concat(e.query).concat(e.hash),newUrl:"".concat(t).concat(e.query).concat(e.hash)})}return Promise.resolve({type:"redirect-external",destination:c})}return Promise.resolve({type:"next"})}(t.dataHref,t.response,e);return{dataHref:t.dataHref,json:t.json,response:t.response,text:t.text,cacheKey:t.cacheKey,effect:r}}catch(e){return null}})).apply(this,arguments)}let Z=Symbol("SSG_DATA_NOT_FOUND");function z(e){try{return JSON.parse(e)}catch(e){return null}}function G(e){var t;let{dataHref:r,inflightCache:n,isPrefetch:a,hasMiddleware:o,isServerRender:i,parseJSON:l,persistCache:u,isBackground:c,unstable_skipClientCache:d}=e,{href:f}=new URL(r,window.location.href),p=e=>(function e(t,r,n){return fetch(t,{credentials:"same-origin",method:n.method||"GET",headers:Object.assign({},n.headers,{"x-nextjs-data":"1"})}).then(a=>!a.ok&&r>1&&a.status>=500?e(t,r-1,n):a)})(r,i?3:1,{headers:Object.assign({},a?{purpose:"prefetch"}:{},a&&o?{"x-middleware-prefetch":"1"}:{}),method:null!=(t=null==e?void 0:e.method)?t:"GET"}).then(t=>t.ok&&(null==e?void 0:e.method)==="HEAD"?{dataHref:r,response:t,text:"",json:{},cacheKey:f}:t.text().then(e=>{if(!t.ok){if(o&&[301,302,307,308].includes(t.status))return{dataHref:r,response:t,text:e,json:{},cacheKey:f};if(!o&&404===t.status){var n;if(null==(n=z(e))?void 0:n.notFound)return{dataHref:r,json:{notFound:Z},response:t,text:e,cacheKey:f}}let a=Error("Failed to load static props");throw i||s.markAssetError(a),a}return{dataHref:r,json:l?z(e):null,response:t,text:e,cacheKey:f}})).then(e=>(u&&"no-cache"!==e.response.headers.get("x-middleware-cache")||delete n[f],e)).catch(e=>{throw d||delete n[f],("Failed to fetch"===e.message||"NetworkError when attempting to fetch resource."===e.message||"Load failed"===e.message)&&s.markAssetError(e),e});return d&&u?p({}).then(e=>(n[f]=Promise.resolve(e),e)):void 0!==n[f]?n[f]:n[f]=p(c?{method:"HEAD"}:{})}function V(){return Math.random().toString(36).slice(2,10)}function X(e){let{url:t,router:r}=e;if(t===E.addBasePath(b.addLocale(r.asPath,r.locale)))throw Error("Invariant: attempted to hard navigate to the same URL ".concat(t," ").concat(location.href));window.location.href=t}let Y=e=>{let{route:t,router:r}=e,n=!1,a=r.clc=()=>{n=!0},o=()=>{if(n){let e=Error('Abort fetching component for route: "'.concat(t,'"'));throw e.cancelled=!0,e}a===r.clc&&(r.clc=null)};return o};class ${reload(){window.location.reload()}back(){window.history.back()}forward(){window.history.forward()}push(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{url:e,as:t}=H(this,e,t),this.change("pushState",e,t,r)}replace(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{url:e,as:t}=H(this,e,t),this.change("replaceState",e,t,r)}change(e,t,r,o,i){var d=this;return n(function*(){let n,f;if(!M.isLocalURL(t))return X({url:t,router:d}),!1;let p=1===o._h,j=p||o._shouldResolveHref||P.parsePath(t).pathname===P.parsePath(r).pathname,C=a({},d.state),O=!0!==d.isReady;d.isReady=!0;let A=d.isSsr;if(p||(d.isSsr=!1),p&&d.clc)return!1;let T=C.locale;h.ST&&performance.mark("routeChange");let{shallow:N=!1,scroll:B=!0}=o,U={shallow:N};d._inFlightRoute&&d.clc&&(A||$.events.emit("routeChangeError",k(),d._inFlightRoute,U),d.clc(),d.clc=null),r=E.addBasePath(b.addLocale(x.hasBasePath(r)?w.removeBasePath(r):r,o.locale,d.defaultLocale));let q=S.removeLocale(x.hasBasePath(r)?w.removeBasePath(r):r,C.locale);d._inFlightRoute=r;let W=T!==C.locale;if(!p&&d.onlyAHashChange(q)&&!W){C.asPath=q,$.events.emit("hashChangeStart",r,U),d.changeState(e,t,r,a({},o,{scroll:!1})),B&&d.scrollToHash(q);try{yield d.set(C,d.components[C.route],null)}catch(e){throw c.default(e)&&e.cancelled&&$.events.emit("routeChangeError",e,q,U),e}return $.events.emit("hashChangeComplete",r,U),!0}let z=g.parseRelativeUrl(t),{pathname:G,query:V}=z;try{[n,{__rewrites:f}]=yield Promise.all([d.pageLoader.getPageList(),s.getClientBuildManifest(),d.pageLoader.getMiddleware()])}catch(e){return X({url:r,router:d}),!1}d.urlIsNew(q)||W||(e="replaceState");let Y=r;G=G?l.removeTrailingSlash(w.removeBasePath(G)):G;let K=l.removeTrailingSlash(G),J=r.startsWith("/")&&g.parseRelativeUrl(r).pathname,Q=!!(J&&K!==J&&(!m.isDynamicRoute(K)||!y.getRouteMatcher(v.getRouteRegex(K))(J))),ee=!o.shallow&&(yield D({asPath:r,locale:C.locale,router:d}));if(p&&ee&&(j=!1),j&&"/_error"!==G&&(o._shouldResolveHref=!0,z.pathname=F(G,n),z.pathname===G||(G=z.pathname,z.pathname=E.addBasePath(G),ee||(t=_.formatWithValidation(z)))),!M.isLocalURL(r))return X({url:r,router:d}),!1;Y=S.removeLocale(w.removeBasePath(Y),C.locale),K=l.removeTrailingSlash(G);let et=!1;if(m.isDynamicRoute(K)){let e=g.parseRelativeUrl(Y),n=e.pathname,a=v.getRouteRegex(K);et=y.getRouteMatcher(a)(n);let o=K===n,i=o?I.interpolateAs(K,n,V):{};if(et&&(!o||i.result))o?r=_.formatWithValidation(Object.assign({},e,{pathname:i.result,query:L.omit(V,i.params)})):Object.assign(V,et);else{let e=Object.keys(a.groups).filter(e=>!V[e]&&!a.groups[e].optional);if(e.length>0&&!ee)throw Error((o?"The provided `href` (".concat(t,") value is missing query values (").concat(e.join(", "),") to be interpolated properly. "):"The provided `as` value (".concat(n,") is incompatible with the `href` value (").concat(K,"). "))+"Read more: https://nextjs.org/docs/messages/".concat(o?"href-interpolation-failed":"incompatible-href-as"))}}p||$.events.emit("routeChangeStart",r,U);let er="/404"===d.pathname||"/_error"===d.pathname;try{var en,ea,eo,ei,el,es,eu,ec;let l=yield d.getRouteInfo({route:K,pathname:G,query:V,as:r,resolvedAs:Y,routeProps:U,locale:C.locale,isPreview:C.isPreview,hasMiddleware:ee,unstable_skipClientCache:o.unstable_skipClientCache,isQueryUpdating:p&&!d.isFallback,isMiddlewareRewrite:Q});if("route"in l&&ee){K=G=l.route||K,U.shallow||(V=Object.assign({},l.query||{},V));let e=x.hasBasePath(z.pathname)?w.removeBasePath(z.pathname):z.pathname;if(et&&G!==e&&Object.keys(et).forEach(e=>{et&&V[e]===et[e]&&delete V[e]}),m.isDynamicRoute(G)){let e=!U.shallow&&l.resolvedAs?l.resolvedAs:E.addBasePath(b.addLocale(new URL(r,location.href).pathname,C.locale),!0),t=e;x.hasBasePath(t)&&(t=w.removeBasePath(t));let n=v.getRouteRegex(G),a=y.getRouteMatcher(n)(new URL(t,location.href).pathname);a&&Object.assign(V,a)}}if("type"in l){if("redirect-internal"===l.type)return d.change(e,l.newUrl,l.newAs,o);return X({url:l.destination,router:d}),new Promise(()=>{})}let s=l.Component;if(s&&s.unstable_scriptLoader){let e=[].concat(s.unstable_scriptLoader());e.forEach(e=>{u.handleClientScriptLoad(e.props)})}if((l.__N_SSG||l.__N_SSP)&&l.props){if(l.props.pageProps&&l.props.pageProps.__N_REDIRECT){o.locale=!1;let t=l.props.pageProps.__N_REDIRECT;if(t.startsWith("/")&&!1!==l.props.pageProps.__N_REDIRECT_BASE_PATH){let r=g.parseRelativeUrl(t);r.pathname=F(r.pathname,n);let{url:a,as:i}=H(d,t,t);return d.change(e,a,i,o)}return X({url:t,router:d}),new Promise(()=>{})}if(C.isPreview=!!l.props.__N_PREVIEW,l.props.notFound===Z){let e;try{yield d.fetchComponent("/404"),e="/404"}catch(t){e="/_error"}if(l=yield d.getRouteInfo({route:e,pathname:e,query:V,as:r,resolvedAs:Y,routeProps:{shallow:!1},locale:C.locale,isPreview:C.isPreview}),"type"in l)throw Error("Unexpected middleware effect on /404")}}p&&"/_error"===d.pathname&&(null==(en=self.__NEXT_DATA__.props)?void 0:null==(ea=en.pageProps)?void 0:ea.statusCode)===500&&(null==(eo=l.props)?void 0:eo.pageProps)&&(l.props.pageProps.statusCode=500);let f=o.shallow&&C.route===(null!=(ei=l.route)?ei:K),h=null!=(el=o.scroll)?el:!p&&!f,_=null!=i?i:h?{x:0,y:0}:null,P=a({},C,{route:K,pathname:G,query:V,asPath:q,isFallback:!1});if(p&&er){if(l=yield d.getRouteInfo({route:d.pathname,pathname:d.pathname,query:V,as:r,resolvedAs:Y,routeProps:{shallow:!1},locale:C.locale,isPreview:C.isPreview,isQueryUpdating:p&&!d.isFallback}),"type"in l)throw Error("Unexpected middleware effect on ".concat(d.pathname));"/_error"===d.pathname&&(null==(es=self.__NEXT_DATA__.props)?void 0:null==(eu=es.pageProps)?void 0:eu.statusCode)===500&&(null==(ec=l.props)?void 0:ec.pageProps)&&(l.props.pageProps.statusCode=500);try{yield d.set(P,l,_)}catch(e){throw c.default(e)&&e.cancelled&&$.events.emit("routeChangeError",e,q,U),e}return!0}$.events.emit("beforeHistoryChange",r,U),d.changeState(e,t,r,o);let S=p&&!_&&!O&&!W&&R.compareRouterStates(P,d.state);if(!S){try{yield d.set(P,l,_)}catch(e){if(e.cancelled)l.error=l.error||e;else throw e}if(l.error)throw p||$.events.emit("routeChangeError",l.error,q,U),l.error;p||$.events.emit("routeChangeComplete",r,U),h&&/#.+$/.test(r)&&d.scrollToHash(r)}return!0}catch(e){if(c.default(e)&&e.cancelled)return!1;throw e}})()}changeState(e,t,r){let n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};("pushState"!==e||h.getURL()!==r)&&(this._shallow=n.shallow,window.history[e]({url:t,as:r,options:n,__N:!0,key:this._key="pushState"!==e?this._key:V()},"",r))}handleRouteInfoError(e,t,r,a,o,i){var l=this;return n(function*(){if(console.error(e),e.cancelled)throw e;if(s.isAssetError(e)||i)throw $.events.emit("routeChangeError",e,a,o),X({url:a,router:l}),k();try{let n;let{page:a,styleSheets:o}=yield l.fetchComponent("/_error"),i={props:n,Component:a,styleSheets:o,err:e,error:e};if(!i.props)try{i.props=yield l.getInitialProps(a,{err:e,pathname:t,query:r})}catch(e){console.error("Error in error page `getInitialProps`: ",e),i.props={}}return i}catch(e){return l.handleRouteInfoError(c.default(e)?e:Error(e+""),t,r,a,o,!0)}})()}getRouteInfo(e){let{route:t,pathname:r,query:o,as:i,resolvedAs:s,routeProps:u,locale:d,hasMiddleware:p,isPreview:h,unstable_skipClientCache:m,isQueryUpdating:g,isMiddlewareRewrite:y}=e;var v=this;return n(function*(){let e=t;try{var P,b,S,E;let t=Y({route:e,router:v}),c=v.components[e];if(u.shallow&&c&&v.route===e)return c;p&&(c=void 0);let x=!c||"initial"in c?void 0:c,C={dataHref:v.pageLoader.getDataHref({href:_.formatWithValidation({pathname:r,query:o}),skipInterpolation:!0,asPath:s,locale:d}),hasMiddleware:!0,isServerRender:v.isSsr,parseJSON:!0,inflightCache:g?v.sbc:v.sdc,persistCache:!h,isPrefetch:!1,unstable_skipClientCache:m,isBackground:g},O=g&&!y?null:yield q({fetchData:()=>G(C),asPath:s,locale:d,router:v}).catch(e=>{if(g)return null;throw e});if(g&&(O?O.json=self.__NEXT_DATA__.props:O={json:self.__NEXT_DATA__.props}),t(),(null==O?void 0:null==(P=O.effect)?void 0:P.type)==="redirect-internal"||(null==O?void 0:null==(b=O.effect)?void 0:b.type)==="redirect-external")return O.effect;if((null==O?void 0:null==(S=O.effect)?void 0:S.type)==="rewrite"){let t=l.removeTrailingSlash(O.effect.resolvedHref),n=yield v.pageLoader.getPageList();if((!g||n.includes(t))&&(e=t,r=O.effect.resolvedHref,o=a({},o,O.effect.parsedAs.query),s=w.removeBasePath(f.normalizeLocalePath(O.effect.parsedAs.pathname,v.locales).pathname),c=v.components[e],u.shallow&&c&&v.route===e&&!p))return a({},c,{route:e})}if(j.isAPIRoute(e))return X({url:i,router:v}),new Promise(()=>{});let R=x||(yield v.fetchComponent(e).then(e=>({Component:e.page,styleSheets:e.styleSheets,__N_SSG:e.mod.__N_SSG,__N_SSP:e.mod.__N_SSP}))),M=null==O?void 0:null==(E=O.response)?void 0:E.headers.get("x-middleware-skip"),A=R.__N_SSG||R.__N_SSP;M&&(null==O?void 0:O.dataHref)&&delete v.sdc[O.dataHref];let{props:L,cacheKey:T}=yield v._getData(n(function*(){if(A){if((null==O?void 0:O.json)&&!M)return{cacheKey:O.cacheKey,props:O.json};let e=(null==O?void 0:O.dataHref)?O.dataHref:v.pageLoader.getDataHref({href:_.formatWithValidation({pathname:r,query:o}),asPath:s,locale:d}),t=yield G({dataHref:e,isServerRender:v.isSsr,parseJSON:!0,inflightCache:M?{}:v.sdc,persistCache:!h,isPrefetch:!1,unstable_skipClientCache:m});return{cacheKey:t.cacheKey,props:t.json||{}}}return{headers:{},props:yield v.getInitialProps(R.Component,{pathname:r,query:o,asPath:i,locale:d,locales:v.locales,defaultLocale:v.defaultLocale})}}));return R.__N_SSP&&C.dataHref&&T&&delete v.sdc[T],v.isPreview||!R.__N_SSG||g||G(Object.assign({},C,{isBackground:!0,persistCache:!1,inflightCache:v.sbc})).catch(()=>{}),L.pageProps=Object.assign({},L.pageProps),R.props=L,R.route=e,R.query=o,R.resolvedAs=s,v.components[e]=R,R}catch(e){return v.handleRouteInfoError(c.getProperError(e),r,o,i,u)}})()}set(e,t,r){return this.state=e,this.sub(t,this.components["/_app"].Component,r)}beforePopState(e){this._bps=e}onlyAHashChange(e){if(!this.asPath)return!1;let[t,r]=this.asPath.split("#"),[n,a]=e.split("#");return!!a&&t===n&&r===a||t===n&&r!==a}scrollToHash(e){let[,t=""]=e.split("#");if(""===t||"top"===t){N.handleSmoothScroll(()=>window.scrollTo(0,0));return}let r=decodeURIComponent(t),n=document.getElementById(r);if(n){N.handleSmoothScroll(()=>n.scrollIntoView());return}let a=document.getElementsByName(r)[0];a&&N.handleSmoothScroll(()=>a.scrollIntoView())}urlIsNew(e){return this.asPath!==e}prefetch(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};var o=this;return n(function*(){if(A.isBot(window.navigator.userAgent))return;let n=g.parseRelativeUrl(e),{pathname:i,query:s}=n,u=i,c=yield o.pageLoader.getPageList(),d=t,f=void 0!==r.locale?r.locale||void 0:o.locale,p=yield D({asPath:t,locale:f,router:o});n.pathname=F(n.pathname,c),m.isDynamicRoute(n.pathname)&&(i=n.pathname,n.pathname=i,Object.assign(s,y.getRouteMatcher(v.getRouteRegex(n.pathname))(P.parsePath(t).pathname)||{}),p||(e=_.formatWithValidation(n)));let h=yield q({fetchData:()=>G({dataHref:o.pageLoader.getDataHref({href:_.formatWithValidation({pathname:u,query:s}),skipInterpolation:!0,asPath:d,locale:f}),hasMiddleware:!0,isServerRender:o.isSsr,parseJSON:!0,inflightCache:o.sdc,persistCache:!o.isPreview,isPrefetch:!0}),asPath:t,locale:f,router:o});if((null==h?void 0:h.effect.type)==="rewrite"&&(n.pathname=h.effect.resolvedHref,i=h.effect.resolvedHref,s=a({},s,h.effect.parsedAs.query),d=h.effect.parsedAs.pathname,e=_.formatWithValidation(n)),(null==h?void 0:h.effect.type)==="redirect-external")return;let b=l.removeTrailingSlash(i);yield Promise.all([o.pageLoader._isSsg(b).then(t=>!!t&&G({dataHref:(null==h?void 0:h.json)?null==h?void 0:h.dataHref:o.pageLoader.getDataHref({href:e,asPath:d,locale:f}),isServerRender:!1,parseJSON:!0,inflightCache:o.sdc,persistCache:!o.isPreview,isPrefetch:!0,unstable_skipClientCache:r.unstable_skipClientCache||r.priority&&!0}).then(()=>!1)),o.pageLoader[r.priority?"loadPage":"prefetch"](b)])})()}fetchComponent(e){var t=this;return n(function*(){let r=Y({route:e,router:t});try{let n=yield t.pageLoader.loadPage(e);return r(),n}catch(e){throw r(),e}})()}_getData(e){let t=!1,r=()=>{t=!0};return this.clc=r,e().then(e=>{if(r===this.clc&&(this.clc=null),t){let e=Error("Loading initial props cancelled");throw e.cancelled=!0,e}return e})}_getFlightData(e){return G({dataHref:e,isServerRender:!0,parseJSON:!1,inflightCache:this.sdc,persistCache:!1,isPrefetch:!1}).then(e=>{let{text:t}=e;return{data:t}})}getInitialProps(e,t){let{Component:r}=this.components["/_app"],n=this._wrapApp(r);return t.AppTree=n,h.loadGetInitialProps(r,{AppTree:n,Component:e,router:this,ctx:t})}get route(){return this.state.route}get pathname(){return this.state.pathname}get query(){return this.state.query}get asPath(){return this.state.asPath}get locale(){return this.state.locale}get isFallback(){return this.state.isFallback}get isPreview(){return this.state.isPreview}constructor(e,t,r,{initialProps:n,pageLoader:a,App:o,wrapApp:i,Component:s,err:u,subscription:c,isFallback:d,locale:f,locales:p,defaultLocale:y,domainLocales:v,isPreview:P}){this.sdc={},this.sbc={},this.isFirstPopStateEvent=!0,this._key=V(),this.onPopState=e=>{let t;let{isFirstPopStateEvent:r}=this;this.isFirstPopStateEvent=!1;let n=e.state;if(!n){let{pathname:e,query:t}=this;this.changeState("replaceState",_.formatWithValidation({pathname:E.addBasePath(e),query:t}),h.getURL());return}if(n.__NA){window.location.reload();return}if(!n.__N||r&&this.locale===n.options.locale&&n.as===this.asPath)return;let{url:a,as:o,options:i,key:l}=n;this._key=l;let{pathname:s}=g.parseRelativeUrl(a);(!this.isSsr||o!==E.addBasePath(this.asPath)||s!==E.addBasePath(this.pathname))&&(!this._bps||this._bps(n))&&this.change("replaceState",a,o,Object.assign({},i,{shallow:i.shallow&&this._shallow,locale:i.locale||this.defaultLocale,_h:0}),t)};let b=l.removeTrailingSlash(e);this.components={},"/_error"!==e&&(this.components[b]={Component:s,initial:!0,props:n,err:u,__N_SSG:n&&n.__N_SSG,__N_SSP:n&&n.__N_SSP}),this.components["/_app"]={Component:o,styleSheets:[]},this.events=$.events,this.pageLoader=a;let S=m.isDynamicRoute(e)&&self.__NEXT_DATA__.autoExport;if(this.basePath="",this.sub=c,this.clc=null,this._wrapApp=i,this.isSsr=!0,this.isLocaleDomain=!1,this.isReady=!!(self.__NEXT_DATA__.gssp||self.__NEXT_DATA__.gip||self.__NEXT_DATA__.appGip&&!self.__NEXT_DATA__.gsp||!S&&!self.location.search),this.state={route:b,pathname:e,query:t,asPath:S?e:r,isPreview:!!P,locale:void 0,isFallback:d},this._initialMatchesMiddlewarePromise=Promise.resolve(!1),!r.startsWith("//")){let n={locale:f},a=h.getURL();this._initialMatchesMiddlewarePromise=D({router:this,locale:f,asPath:a}).then(o=>(n._shouldResolveHref=r!==e,this.changeState("replaceState",o?a:_.formatWithValidation({pathname:E.addBasePath(e),query:t}),a,n),o))}window.addEventListener("popstate",this.onPopState)}}$.events=p.default(),t.default=$},34441:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addLocale=function(e,t,r,o){return t&&t!==r&&(o||!a.pathHasPrefix(e.toLowerCase(),"/".concat(t.toLowerCase()))&&!a.pathHasPrefix(e.toLowerCase(),"/api"))?n.addPathPrefix(e,"/".concat(t)):e};var n=r(44135),a=r(93210)},44135:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPathPrefix=function(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:a,hash:o}=n.parsePath(e);return"".concat(t).concat(r).concat(a).concat(o)};var n=r(26727)},96074:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPathSuffix=function(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:a,hash:o}=n.parsePath(e);return"".concat(r).concat(t).concat(a).concat(o)};var n=r(26727)},79002:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.compareRouterStates=function(e,t){let r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=r.length;n--;){let a=r[n];if("query"===a){let r=Object.keys(e.query);if(r.length!==Object.keys(t.query).length)return!1;for(let n=r.length;n--;){let a=r[n];if(!t.query.hasOwnProperty(a)||e.query[a]!==t.query[a])return!1}}else if(!t.hasOwnProperty(a)||e[a]!==t[a])return!1}return!0}},57429:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatNextPathnameInfo=function(e){let t=i.addLocale(e.pathname,e.locale,e.buildId?void 0:e.defaultLocale,e.ignorePrefix);return(e.buildId||!e.trailingSlash)&&(t=n.removeTrailingSlash(t)),e.buildId&&(t=o.addPathSuffix(a.addPathPrefix(t,"/_next/data/".concat(e.buildId)),"/"===e.pathname?"index.json":".json")),t=a.addPathPrefix(t,e.basePath),!e.buildId&&e.trailingSlash?t.endsWith("/")?t:o.addPathSuffix(t,"/"):n.removeTrailingSlash(t)};var n=r(40012),a=r(44135),o=r(96074),i=r(34441)},67795:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatUrl=o,t.formatWithValidation=function(e){return o(e)},t.urlObjectKeys=void 0;var n=(0,r(91598).Z)(r(94919));let a=/https?|ftp|gopher|file/;function o(e){let{auth:t,hostname:r}=e,o=e.protocol||"",i=e.pathname||"",l=e.hash||"",s=e.query||"",u=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?u=t+e.host:r&&(u=t+(~r.indexOf(":")?"[".concat(r,"]"):r),e.port&&(u+=":"+e.port)),s&&"object"==typeof s&&(s=String(n.urlQueryToSearchParams(s)));let c=e.search||s&&"?".concat(s)||"";return o&&!o.endsWith(":")&&(o+=":"),e.slashes||(!o||a.test(o))&&!1!==u?(u="//"+(u||""),i&&"/"!==i[0]&&(i="/"+i)):u||(u=""),l&&"#"!==l[0]&&(l="#"+l),c&&"?"!==c[0]&&(c="?"+c),i=i.replace(/[?#]/g,encodeURIComponent),c=c.replace("#","%23"),"".concat(o).concat(u).concat(i).concat(c).concat(l)}t.urlObjectKeys=["auth","hash","host","hostname","href","path","pathname","port","protocol","query","search","slashes"]},27929:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r="/"===e?"/index":/^\/index(\/|$)/.test(e)?"/index".concat(e):"".concat(e);return r+t}},18756:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getNextPathnameInfo=function(e,t){var r;let{basePath:i,i18n:l,trailingSlash:s}=null!=(r=t.nextConfig)?r:{},u={pathname:e,trailingSlash:"/"!==e?e.endsWith("/"):s};if(i&&o.pathHasPrefix(u.pathname,i)&&(u.pathname=a.removePathPrefix(u.pathname,i),u.basePath=i),!0===t.parseData&&u.pathname.startsWith("/_next/data/")&&u.pathname.endsWith(".json")){let e=u.pathname.replace(/^\/_next\/data\//,"").replace(/\.json$/,"").split("/"),t=e[0];u.pathname="index"!==e[1]?"/".concat(e.slice(1).join("/")):"/",u.buildId=t}if(l){let e=n.normalizeLocalePath(u.pathname,l.locales);u.locale=null==e?void 0:e.detectedLocale,u.pathname=(null==e?void 0:e.pathname)||u.pathname}return u};var n=r(24769),a=r(22650),o=r(93210)},4146:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleSmoothScroll=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=document.documentElement,n=r.style.scrollBehavior;r.style.scrollBehavior="auto",t.dontForceLayout||r.getClientRects(),e(),r.style.scrollBehavior=n}},18588:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getSortedRoutes",{enumerable:!0,get:function(){return n.getSortedRoutes}}),Object.defineProperty(t,"isDynamicRoute",{enumerable:!0,get:function(){return a.isDynamicRoute}});var n=r(30566),a=r(86238)},18074:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.interpolateAs=function(e,t,r){let o="",i=a.getRouteRegex(e),l=i.groups,s=(t!==e?n.getRouteMatcher(i)(t):"")||r;o=e;let u=Object.keys(l);return u.every(e=>{let t=s[e]||"",{repeat:r,optional:n}=l[e],a="[".concat(r?"...":"").concat(e,"]");return n&&(a="".concat(t?"":"/","[").concat(a,"]")),r&&!Array.isArray(t)&&(t=[t]),(n||e in s)&&(o=o.replace(a,r?t.map(e=>encodeURIComponent(e)).join("/"):encodeURIComponent(t))||"/")})||(o=""),{params:u,result:o}};var n=r(13156),a=r(54903)},21754:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isBot=function(e){return/Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(e)}},86238:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isDynamicRoute=function(e){return r.test(e)};let r=/\/\[[^/]+?\](?=\/|$)/},62139:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isLocalURL=function(e){if(!n.isAbsoluteUrl(e))return!0;try{let t=n.getLocationOrigin(),r=new URL(e,t);return r.origin===t&&a.hasBasePath(r.pathname)}catch(e){return!1}};var n=r(670),a=r(10928)},17562:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.omit=function(e,t){let r={};return Object.keys(e).forEach(n=>{t.includes(n)||(r[n]=e[n])}),r}},26727:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parsePath=function(e){let t=e.indexOf("#"),r=e.indexOf("?"),n=r>-1&&(t<0||r<t);return n||t>-1?{pathname:e.substring(0,n?r:t),query:n?e.substring(r,t>-1?t:void 0):"",hash:t>-1?e.slice(t):""}:{pathname:e,query:"",hash:""}}},22864:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parseRelativeUrl=function(e,t){let r=new URL(n.getLocationOrigin()),o=t?new URL(t,r):e.startsWith(".")?new URL(window.location.href):r,{pathname:i,searchParams:l,search:s,hash:u,href:c,origin:d}=new URL(e,o);if(d!==r.origin)throw Error("invariant: invalid relative URL, router received ".concat(e));return{pathname:i,query:a.searchParamsToUrlQuery(l),search:s,hash:u,href:c.slice(r.origin.length)}};var n=r(670),a=r(94919)},93210:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.pathHasPrefix=function(e,t){if("string"!=typeof e)return!1;let{pathname:r}=n.parsePath(e);return r===t||r.startsWith(t+"/")};var n=r(26727)},94919:function(e,t){"use strict";function r(e){return"string"!=typeof e&&("number"!=typeof e||isNaN(e))&&"boolean"!=typeof e?"":String(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.searchParamsToUrlQuery=function(e){let t={};return e.forEach((e,r)=>{void 0===t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]}),t},t.urlQueryToSearchParams=function(e){let t=new URLSearchParams;return Object.entries(e).forEach(e=>{let[n,a]=e;Array.isArray(a)?a.forEach(e=>t.append(n,r(e))):t.set(n,r(a))}),t},t.assign=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return r.forEach(t=>{Array.from(t.keys()).forEach(t=>e.delete(t)),t.forEach((t,r)=>e.append(r,t))}),e}},22650:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePathPrefix=function(e,t){if(n.pathHasPrefix(e,t)){let r=e.slice(t.length);return r.startsWith("/")?r:"/".concat(r)}return e};var n=r(93210)},40012:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=function(e){return e.replace(/\/$/,"")||"/"}},1978:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resolveHref=function(e,t,r){let d;let f="string"==typeof t?t:a.formatWithValidation(t),p=f.match(/^[a-zA-Z]{1,}:\/\//),h=p?f.slice(p[0].length):f,m=h.split("?");if((m[0]||"").match(/(\/\/|\\)/)){console.error("Invalid href passed to next/router: ".concat(f,", repeated forward-slashes (//) or backslashes \\ are not valid in the href"));let e=i.normalizeRepeatedSlashes(h);f=(p?p[0]:"")+e}if(!s.isLocalURL(f))return r?[f]:f;try{d=new URL(f.startsWith("#")?e.asPath:e.pathname,"http://n")}catch(e){d=new URL("/","http://n")}try{let e=new URL(f,d);e.pathname=l.normalizePathTrailingSlash(e.pathname);let t="";if(u.isDynamicRoute(e.pathname)&&e.searchParams&&r){let r=n.searchParamsToUrlQuery(e.searchParams),{result:i,params:l}=c.interpolateAs(e.pathname,e.pathname,r);i&&(t=a.formatWithValidation({pathname:i,hash:e.hash,query:o.omit(r,l)}))}let i=e.origin===d.origin?e.href.slice(e.origin.length):e.href;return r?[i,t||i]:i}catch(e){return r?[f]:f}};var n=r(94919),a=r(67795),o=r(17562),i=r(670),l=r(52700),s=r(62139),u=r(86238),c=r(18074)},13156:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getRouteMatcher=function(e){let{re:t,groups:r}=e;return e=>{let a=t.exec(e);if(!a)return!1;let o=e=>{try{return decodeURIComponent(e)}catch(e){throw new n.DecodeError("failed to decode param")}},i={};return Object.keys(r).forEach(e=>{let t=r[e],n=a[t.pos];void 0!==n&&(i[e]=~n.indexOf("/")?n.split("/").map(e=>o(e)):t.repeat?[o(n)]:o(n))}),i}};var n=r(670)},54903:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getRouteRegex=s,t.getNamedRouteRegex=function(e){let t=u(e);return n({},s(e),{namedRegex:"^".concat(t.namedParameterizedRoute,"(?:/)?$"),routeKeys:t.routeKeys})},t.getNamedMiddlewareRegex=function(e,t){let{parameterizedRoute:r}=l(e),{catchAll:n=!0}=t;if("/"===r)return{namedRegex:"^/".concat(n?".*":"","$")};let{namedParameterizedRoute:a}=u(e);return{namedRegex:"^".concat(a).concat(n?"(?:(/.*)?)":"","$")}};var n=r(6495).Z,a=r(18659),o=r(40012);function i(e){let t=e.startsWith("[")&&e.endsWith("]");t&&(e=e.slice(1,-1));let r=e.startsWith("...");return r&&(e=e.slice(3)),{key:e,repeat:r,optional:t}}function l(e){let t=o.removeTrailingSlash(e).slice(1).split("/"),r={},n=1;return{parameterizedRoute:t.map(e=>{if(!(e.startsWith("[")&&e.endsWith("]")))return"/".concat(a.escapeStringRegexp(e));{let{key:t,optional:a,repeat:o}=i(e.slice(1,-1));return r[t]={pos:n++,repeat:o,optional:a},o?a?"(?:/(.+?))?":"/(.+?)":"/([^/]+?)"}}).join(""),groups:r}}function s(e){let{parameterizedRoute:t,groups:r}=l(e);return{re:RegExp("^".concat(t,"(?:/)?$")),groups:r}}function u(e){let t,r;let n=o.removeTrailingSlash(e).slice(1).split("/"),l=(t=97,r=1,()=>{let e="";for(let n=0;n<r;n++)e+=String.fromCharCode(t),++t>122&&(r++,t=97);return e}),s={};return{namedParameterizedRoute:n.map(e=>{if(!(e.startsWith("[")&&e.endsWith("]")))return"/".concat(a.escapeStringRegexp(e));{let{key:t,optional:r,repeat:n}=i(e.slice(1,-1)),a=t.replace(/\W/g,""),o=!1;return(0===a.length||a.length>30)&&(o=!0),isNaN(parseInt(a.slice(0,1)))||(o=!0),o&&(a=l()),s[a]=t,n?r?"(?:/(?<".concat(a,">.+?))?"):"/(?<".concat(a,">.+?)"):"/(?<".concat(a,">[^/]+?)")}}).join(""),routeKeys:s}}},30566:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getSortedRoutes=function(e){let t=new r;return e.forEach(e=>t.insert(e)),t.smoosh()};class r{insert(e){this._insert(e.split("/").filter(Boolean),[],!1)}smoosh(){return this._smoosh()}_smoosh(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=[...this.children.keys()].sort();null!==this.slugName&&t.splice(t.indexOf("[]"),1),null!==this.restSlugName&&t.splice(t.indexOf("[...]"),1),null!==this.optionalRestSlugName&&t.splice(t.indexOf("[[...]]"),1);let r=t.map(t=>this.children.get(t)._smoosh("".concat(e).concat(t,"/"))).reduce((e,t)=>[...e,...t],[]);if(null!==this.slugName&&r.push(...this.children.get("[]")._smoosh("".concat(e,"[").concat(this.slugName,"]/"))),!this.placeholder){let t="/"===e?"/":e.slice(0,-1);if(null!=this.optionalRestSlugName)throw Error('You cannot define a route with the same specificity as a optional catch-all route ("'.concat(t,'" and "').concat(t,"[[...").concat(this.optionalRestSlugName,']]").'));r.unshift(t)}return null!==this.restSlugName&&r.push(...this.children.get("[...]")._smoosh("".concat(e,"[...").concat(this.restSlugName,"]/"))),null!==this.optionalRestSlugName&&r.push(...this.children.get("[[...]]")._smoosh("".concat(e,"[[...").concat(this.optionalRestSlugName,"]]/"))),r}_insert(e,t,n){if(0===e.length){this.placeholder=!1;return}if(n)throw Error("Catch-all must be the last part of the URL.");let a=e[0];if(a.startsWith("[")&&a.endsWith("]")){let r=a.slice(1,-1),i=!1;if(r.startsWith("[")&&r.endsWith("]")&&(r=r.slice(1,-1),i=!0),r.startsWith("...")&&(r=r.substring(3),n=!0),r.startsWith("[")||r.endsWith("]"))throw Error("Segment names may not start or end with extra brackets ('".concat(r,"')."));if(r.startsWith("."))throw Error("Segment names may not start with erroneous periods ('".concat(r,"')."));function o(e,r){if(null!==e&&e!==r)throw Error("You cannot use different slug names for the same dynamic path ('".concat(e,"' !== '").concat(r,"')."));t.forEach(e=>{if(e===r)throw Error('You cannot have the same slug name "'.concat(r,'" repeat within a single dynamic path'));if(e.replace(/\W/g,"")===a.replace(/\W/g,""))throw Error('You cannot have the slug names "'.concat(e,'" and "').concat(r,'" differ only by non-word symbols within a single dynamic path'))}),t.push(r)}if(n){if(i){if(null!=this.restSlugName)throw Error('You cannot use both an required and optional catch-all route at the same level ("[...'.concat(this.restSlugName,']" and "').concat(e[0],'" ).'));o(this.optionalRestSlugName,r),this.optionalRestSlugName=r,a="[[...]]"}else{if(null!=this.optionalRestSlugName)throw Error('You cannot use both an optional and required catch-all route at the same level ("[[...'.concat(this.optionalRestSlugName,']]" and "').concat(e[0],'").'));o(this.restSlugName,r),this.restSlugName=r,a="[...]"}}else{if(i)throw Error('Optional route parameters are not yet supported ("'.concat(e[0],'").'));o(this.slugName,r),this.slugName=r,a="[]"}}this.children.has(a)||this.children.set(a,new r),this.children.get(a)._insert(e.slice(1),t,n)}constructor(){this.placeholder=!0,this.children=new Map,this.slugName=null,this.restSlugName=null,this.optionalRestSlugName=null}}},86949:function(e,t){"use strict";let r;Object.defineProperty(t,"__esModule",{value:!0}),t.setConfig=function(e){r=e},t.default=void 0,t.default=()=>r,("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)},31436:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){let{headManager:t,reduceComponentsToState:r}=e;function l(){if(t&&t.mountedInstances){let a=n.Children.toArray(Array.from(t.mountedInstances).filter(Boolean));t.updateHead(r(a,e))}}if(a){var s;null==t||null==(s=t.mountedInstances)||s.add(e.children),l()}return o(()=>{var r;return null==t||null==(r=t.mountedInstances)||r.add(e.children),()=>{var r;null==t||null==(r=t.mountedInstances)||r.delete(e.children)}}),o(()=>(t&&(t._pendingUpdate=l),()=>{t&&(t._pendingUpdate=l)})),i(()=>(t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null),()=>{t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null)})),null};var n=(0,r(91598).Z)(r(67294));let a=!1,o=a?()=>{}:n.useLayoutEffect,i=a?()=>{}:n.useEffect},670:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.execOnce=function(e){let t,r=!1;return function(){for(var n=arguments.length,a=Array(n),o=0;o<n;o++)a[o]=arguments[o];return r||(r=!0,t=e(...a)),t}},t.getLocationOrigin=i,t.getURL=function(){let{href:e}=window.location,t=i();return e.substring(t.length)},t.getDisplayName=l,t.isResSent=s,t.normalizeRepeatedSlashes=function(e){let t=e.split("?"),r=t[0];return r.replace(/\\/g,"/").replace(/\/\/+/g,"/")+(t[1]?"?".concat(t.slice(1).join("?")):"")},t.loadGetInitialProps=u,t.ST=t.SP=t.isAbsoluteUrl=t.WEB_VITALS=void 0;var n=r(60932).Z;t.WEB_VITALS=["CLS","FCP","FID","INP","LCP","TTFB"];let a=/^[a-zA-Z][a-zA-Z\d+\-.]*?:/,o=e=>a.test(e);function i(){let{protocol:e,hostname:t,port:r}=window.location;return"".concat(e,"//").concat(t).concat(r?":"+r:"")}function l(e){return"string"==typeof e?e:e.displayName||e.name||"Unknown"}function s(e){return e.finished||e.headersSent}function u(e,t){return c.apply(this,arguments)}function c(){return(c=n(function*(e,t){let r=t.res||t.ctx&&t.ctx.res;if(!e.getInitialProps)return t.ctx&&t.Component?{pageProps:yield u(t.Component,t.ctx)}:{};let n=yield e.getInitialProps(t);if(r&&s(r))return n;if(!n){let t='"'.concat(l(e),'.getInitialProps()" should resolve to an object. But found "').concat(n,'" instead.');throw Error(t)}return n})).apply(this,arguments)}t.isAbsoluteUrl=o;let d="undefined"!=typeof performance;t.SP=d;let f=d&&["mark","measure","getEntriesByName"].every(e=>"function"==typeof performance[e]);t.ST=f,t.DecodeError=class extends Error{},t.NormalizeError=class extends Error{},t.PageNotFoundError=class extends Error{constructor(e){super(),this.code="ENOENT",this.message="Cannot find module for page: ".concat(e)}},t.MissingStaticPage=class extends Error{constructor(e,t){super(),this.message="Failed to load static file for page: ".concat(e," ").concat(t)}},t.MiddlewareNotFoundError=class extends Error{constructor(){super(),this.code="ENOENT",this.message="Cannot find the middleware module"}}},57238:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.warnOnce=void 0;let r=e=>{};t.warnOnce=r},78018:function(e){var t,r,n,a,o,i,l,s,u,c,d,f,p,h,m,g,y,v,_,P,b,S,w,E,x,j,C,O,R,M,A,L,T,I,N,k,D,B,U,H,F,q,W,Z,z,G;(t={}).d=function(e,r){for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},void 0!==t&&(t.ab="//"),r={},t.r(r),t.d(r,{getCLS:function(){return w},getFCP:function(){return P},getFID:function(){return M},getINP:function(){return q},getLCP:function(){return Z},getTTFB:function(){return G},onCLS:function(){return w},onFCP:function(){return P},onFID:function(){return M},onINP:function(){return q},onLCP:function(){return Z},onTTFB:function(){return G}}),s=-1,u=function(e){addEventListener("pageshow",function(t){t.persisted&&(s=t.timeStamp,e(t))},!0)},c=function(){return window.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},d=function(){var e=c();return e&&e.activationStart||0},f=function(e,t){var r=c(),n="navigate";return s>=0?n="back-forward-cache":r&&(n=document.prerendering||d()>0?"prerender":r.type.replace(/_/g,"-")),{name:e,value:void 0===t?-1:t,rating:"good",delta:0,entries:[],id:"v3-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:n}},p=function(e,t,r){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var n=new PerformanceObserver(function(e){t(e.getEntries())});return n.observe(Object.assign({type:e,buffered:!0},r||{})),n}}catch(e){}},h=function(e,t){var r=function r(n){"pagehide"!==n.type&&"hidden"!==document.visibilityState||(e(n),t&&(removeEventListener("visibilitychange",r,!0),removeEventListener("pagehide",r,!0)))};addEventListener("visibilitychange",r,!0),addEventListener("pagehide",r,!0)},m=function(e,t,r,n){var a,o;return function(i){var l;t.value>=0&&(i||n)&&((o=t.value-(a||0))||void 0===a)&&(a=t.value,t.delta=o,t.rating=(l=t.value)>r[1]?"poor":l>r[0]?"needs-improvement":"good",e(t))}},g=-1,y=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},v=function(){h(function(e){g=e.timeStamp},!0)},_=function(){return g<0&&(g=y(),v(),u(function(){setTimeout(function(){g=y(),v()},0)})),{get firstHiddenTime(){return g}}},P=function(e,t){t=t||{};var r,n=[1800,3e3],a=_(),o=f("FCP"),i=function(e){e.forEach(function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<a.firstHiddenTime&&(o.value=e.startTime-d(),o.entries.push(e),r(!0)))})},l=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],s=l?null:p("paint",i);(l||s)&&(r=m(e,o,n,t.reportAllChanges),l&&i([l]),u(function(a){r=m(e,o=f("FCP"),n,t.reportAllChanges),requestAnimationFrame(function(){requestAnimationFrame(function(){o.value=performance.now()-a.timeStamp,r(!0)})})}))},b=!1,S=-1,w=function(e,t){t=t||{};var r=[.1,.25];b||(P(function(e){S=e.value}),b=!0);var n,a=function(t){S>-1&&e(t)},o=f("CLS",0),i=0,l=[],s=function(e){e.forEach(function(e){if(!e.hadRecentInput){var t=l[0],r=l[l.length-1];i&&e.startTime-r.startTime<1e3&&e.startTime-t.startTime<5e3?(i+=e.value,l.push(e)):(i=e.value,l=[e]),i>o.value&&(o.value=i,o.entries=l,n())}})},c=p("layout-shift",s);c&&(n=m(a,o,r,t.reportAllChanges),h(function(){s(c.takeRecords()),n(!0)}),u(function(){i=0,S=-1,n=m(a,o=f("CLS",0),r,t.reportAllChanges)}))},E={passive:!0,capture:!0},x=new Date,j=function(e,t){n||(n=t,a=e,o=new Date,R(removeEventListener),C())},C=function(){if(a>=0&&a<o-x){var e={entryType:"first-input",name:n.type,target:n.target,cancelable:n.cancelable,startTime:n.timeStamp,processingStart:n.timeStamp+a};i.forEach(function(t){t(e)}),i=[]}},O=function(e){if(e.cancelable){var t,r,n,a=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?(t=function(){j(a,e),n()},r=function(){n()},n=function(){removeEventListener("pointerup",t,E),removeEventListener("pointercancel",r,E)},addEventListener("pointerup",t,E),addEventListener("pointercancel",r,E)):j(a,e)}},R=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach(function(t){return e(t,O,E)})},M=function(e,t){t=t||{};var r,o=[100,300],l=_(),s=f("FID"),c=function(e){e.startTime<l.firstHiddenTime&&(s.value=e.processingStart-e.startTime,s.entries.push(e),r(!0))},d=function(e){e.forEach(c)},g=p("first-input",d);r=m(e,s,o,t.reportAllChanges),g&&h(function(){d(g.takeRecords()),g.disconnect()},!0),g&&u(function(){r=m(e,s=f("FID"),o,t.reportAllChanges),i=[],a=-1,n=null,R(addEventListener),i.push(c),C()})},A=0,L=1/0,T=0,I=function(e){e.forEach(function(e){e.interactionId&&(L=Math.min(L,e.interactionId),A=(T=Math.max(T,e.interactionId))?(T-L)/7+1:0)})},N=function(){return l?A:performance.interactionCount||0},k=function(){"interactionCount"in performance||l||(l=p("event",I,{type:"event",buffered:!0,durationThreshold:0}))},D=0,B=function(){return N()-D},U=[],H={},F=function(e){var t=U[U.length-1],r=H[e.interactionId];if(r||U.length<10||e.duration>t.latency){if(r)r.entries.push(e),r.latency=Math.max(r.latency,e.duration);else{var n={id:e.interactionId,latency:e.duration,entries:[e]};H[n.id]=n,U.push(n)}U.sort(function(e,t){return t.latency-e.latency}),U.splice(10).forEach(function(e){delete H[e.id]})}},q=function(e,t){t=t||{};var r=[200,500];k();var n,a=f("INP"),o=function(e){e.forEach(function(e){e.interactionId&&F(e),"first-input"!==e.entryType||U.some(function(t){return t.entries.some(function(t){return e.duration===t.duration&&e.startTime===t.startTime})})||F(e)});var t,r=(t=Math.min(U.length-1,Math.floor(B()/50)),U[t]);r&&r.latency!==a.value&&(a.value=r.latency,a.entries=r.entries,n())},i=p("event",o,{durationThreshold:t.durationThreshold||40});n=m(e,a,r,t.reportAllChanges),i&&(i.observe({type:"first-input",buffered:!0}),h(function(){o(i.takeRecords()),a.value<0&&B()>0&&(a.value=0,a.entries=[]),n(!0)}),u(function(){U=[],D=N(),n=m(e,a=f("INP"),r,t.reportAllChanges)}))},W={},Z=function(e,t){t=t||{};var r,n=[2500,4e3],a=_(),o=f("LCP"),i=function(e){var t=e[e.length-1];if(t){var n=t.startTime-d();n<a.firstHiddenTime&&(o.value=n,o.entries=[t],r())}},l=p("largest-contentful-paint",i);if(l){r=m(e,o,n,t.reportAllChanges);var s=function(){W[o.id]||(i(l.takeRecords()),l.disconnect(),W[o.id]=!0,r(!0))};["keydown","click"].forEach(function(e){addEventListener(e,s,{once:!0,capture:!0})}),h(s,!0),u(function(a){r=m(e,o=f("LCP"),n,t.reportAllChanges),requestAnimationFrame(function(){requestAnimationFrame(function(){o.value=performance.now()-a.timeStamp,W[o.id]=!0,r(!0)})})})}},z=function e(t){document.prerendering?addEventListener("prerenderingchange",function(){return e(t)},!0):"complete"!==document.readyState?addEventListener("load",function(){return e(t)},!0):setTimeout(t,0)},G=function(e,t){t=t||{};var r=[800,1800],n=f("TTFB"),a=m(e,n,r,t.reportAllChanges);z(function(){var o=c();if(o){if(n.value=Math.max(o.responseStart-d(),0),n.value<0||n.value>performance.now())return;n.entries=[o],a(!0),u(function(){(a=m(e,n=f("TTFB",0),r,t.reportAllChanges))(!0)})}})},e.exports=r},79423:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isAPIRoute=function(e){return"/api"===e||Boolean(null==e?void 0:e.startsWith("/api/"))}},80676:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=a,t.getProperError=function(e){return a(e)?e:Error(n.isPlainObject(e)?JSON.stringify(e):e+"")};var n=r(82849);function a(e){return"object"==typeof e&&null!==e&&"name"in e&&"message"in e}},72431:function(){}},function(e){e.O(0,[9774],function(){return e(e.s=21783)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/main-da49d387d19ca122.js b/_next/static/chunks/main-da49d387d19ca122.js
new file mode 100644
index 00000000000..480ed8868c7
--- /dev/null
+++ b/_next/static/chunks/main-da49d387d19ca122.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{60932:function(e,t){"use strict";function r(e,t,r,n,a,o,i){try{var l=e[o](i),s=l.value}catch(e){r(e);return}l.done?t(s):Promise.resolve(s).then(n,a)}function n(e){return function(){var t=this,n=arguments;return new Promise(function(a,o){var i=e.apply(t,n);function l(e){r(i,a,o,l,s,"next",e)}function s(e){r(i,a,o,l,s,"throw",e)}l(void 0)})}}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},6495:function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(){return r.apply(this,arguments)}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},92648:function(e,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return r}})},91598:function(e,t){"use strict";function r(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(r=function(e){return e?n:t})(e)}function n(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=r(t);if(n&&n.has(e))return n.get(e);var a={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var l=o?Object.getOwnPropertyDescriptor(e,i):null;l&&(l.get||l.set)?Object.defineProperty(a,i,l):a[i]=e[i]}return a.default=e,n&&n.set(e,a),a}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return n}})},17273:function(e,t){"use strict";function r(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}Object.defineProperty(t,"Z",{enumerable:!0,get:function(){return r}})},40037:function(){"trimStart"in String.prototype||(String.prototype.trimStart=String.prototype.trimLeft),"trimEnd"in String.prototype||(String.prototype.trimEnd=String.prototype.trimRight),"description"in Symbol.prototype||Object.defineProperty(Symbol.prototype,"description",{configurable:!0,get:function(){var e=/\((.*)\)/.exec(this.toString());return e?e[1]:void 0}}),Array.prototype.flat||(Array.prototype.flat=function(e,t){return t=this.concat.apply([],this),e>1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then(function(r){return t.resolve(e()).then(function(){return r})},function(r){return t.resolve(e()).then(function(){throw r})})}),Object.fromEntries||(Object.fromEntries=function(e){return Array.from(e).reduce(function(e,t){return e[t[0]]=t[1],e},{})})},33468:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addBasePath=function(e,t){return a.normalizePathTrailingSlash(n.addPathPrefix(e,""))};var n=r(44135),a=r(52700);("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)},54465:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addLocale=void 0,r(52700),t.addLocale=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e},("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)},84643:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.detectDomainLocale=void 0,t.detectDomainLocale=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r]},("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)},10928:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.hasBasePath=function(e){return n.pathHasPrefix(e,"")};var n=r(93210);("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)},31831:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return{mountedInstances:new Set,updateHead:e=>{let t={};e.forEach(e=>{if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'.concat(e.props["data-href"],'"]')))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}let r=t[e.type]||[];r.push(e),t[e.type]=r});let r=t.title?t.title[0]:null,o="";if(r){let{children:e}=r.props;o="string"==typeof e?e:Array.isArray(e)?e.join(""):""}o!==document.title&&(document.title=o),["meta","base","link","style","script"].forEach(e=>{(function(e,t){let r=document.getElementsByTagName("head")[0],o=r.querySelector("meta[name=next-head-count]"),i=Number(o.content),l=[];for(let t=0,r=o.previousElementSibling;t<i;t++,r=(null==r?void 0:r.previousElementSibling)||null){var s;(null==r?void 0:null==(s=r.tagName)?void 0:s.toLowerCase())===e&&l.push(r)}let u=t.map(n).filter(e=>{for(let t=0,r=l.length;t<r;t++){let r=l[t];if(a(r,e))return l.splice(t,1),!1}return!0});l.forEach(e=>{var t;return null==(t=e.parentNode)?void 0:t.removeChild(e)}),u.forEach(e=>r.insertBefore(e,o)),o.content=(i-l.length+u.length).toString()})(e,t[e]||[])})}}},t.isEqualNode=a,t.DOMAttributeNames=void 0;let r={acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",noModule:"noModule"};function n(e){let{type:t,props:n}=e,a=document.createElement(t);for(let e in n){if(!n.hasOwnProperty(e)||"children"===e||"dangerouslySetInnerHTML"===e||void 0===n[e])continue;let o=r[e]||e.toLowerCase();"script"===t&&("async"===o||"defer"===o||"noModule"===o)?a[o]=!!n[e]:a.setAttribute(o,n[e])}let{children:o,dangerouslySetInnerHTML:i}=n;return i?a.innerHTML=i.__html||"":o&&(a.textContent="string"==typeof o?o:Array.isArray(o)?o.join(""):""),a}function a(e,t){if(e instanceof HTMLElement&&t instanceof HTMLElement){let r=t.getAttribute("nonce");if(r&&!e.getAttribute("nonce")){let n=t.cloneNode(!0);return n.setAttribute("nonce",""),n.nonce=r,r===e.nonce&&e.isEqualNode(n)}}return e.isEqualNode(t)}t.DOMAttributeNames=r,("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)},84534:function(e,t,r){"use strict";let n,a,o,i,l,s,u,c,d,f,p,h;Object.defineProperty(t,"__esModule",{value:!0});let m=r(91598).Z;Object.defineProperty(t,"__esModule",{value:!0}),t.initialize=function(){return V.apply(this,arguments)},t.hydrate=function(e){return es.apply(this,arguments)},t.emitter=t.router=t.version=void 0;var g=r(60932).Z,y=r(6495).Z,v=r(92648).Z;r(91598).Z,r(40037);var _=v(r(67294)),P=v(r(20745)),b=r(4664),S=v(r(8550)),w=r(72692),E=r(4146),x=r(86238),j=r(94919),C=r(86949),O=r(670),R=r(17345),M=v(r(31831)),A=v(r(70976)),L=v(r(659)),T=r(18483),I=r(80880),N=r(80676),k=r(28730),D=r(82813),B=r(10928),U=r(48245),H=r(60401),F=r(78914),W=v(r(86954));t.version="13.2.1",t.router=n;let q=S.default();t.emitter=q;let Z=e=>[].slice.call(e),z=!1;self.__next_require__=r;class G extends _.default.Component{componentDidCatch(e,t){this.props.fn(e,t)}componentDidMount(){this.scrollToHash(),n.isSsr&&(a.isFallback||a.nextExport&&(x.isDynamicRoute(n.pathname)||location.search||z)||a.props&&a.props.__N_SSG&&(location.search||z))&&n.replace(n.pathname+"?"+String(j.assign(j.urlQueryToSearchParams(n.query),new URLSearchParams(location.search))),o,{_h:1,shallow:!a.isFallback&&!z}).catch(e=>{if(!e.cancelled)throw e})}componentDidUpdate(){this.scrollToHash()}scrollToHash(){let{hash:e}=location;if(!(e=e&&e.substring(1)))return;let t=document.getElementById(e);t&&setTimeout(()=>t.scrollIntoView(),0)}render(){return this.props.children}}function V(){return(V=g(function*(){arguments.length>0&&void 0!==arguments[0]&&arguments[0],a=JSON.parse(document.getElementById("__NEXT_DATA__").textContent),window.__NEXT_DATA__=a,h=a.defaultLocale;let e=a.assetPrefix||"";if(r.p="".concat(e,"/_next/"),C.setConfig({serverRuntimeConfig:{},publicRuntimeConfig:a.runtimeConfig||{}}),o=O.getURL(),B.hasBasePath(o)&&(o=D.removeBasePath(o)),a.scriptLoader){let{initScriptLoader:e}=r(63573);e(a.scriptLoader)}i=new A.default(a.buildId,e);let t=e=>{let[t,r]=e;return i.routeLoader.onEntrypoint(t,r)};return window.__NEXT_P&&window.__NEXT_P.map(e=>setTimeout(()=>t(e),0)),window.__NEXT_P=[],window.__NEXT_P.push=t,(s=M.default()).getIsSsr=()=>n.isSsr,l=document.getElementById("__next"),{assetPrefix:e}})).apply(this,arguments)}function X(e,t){return _.default.createElement(e,Object.assign({},t))}function Y(e){var t;let{children:r}=e;return _.default.createElement(G,{fn:e=>K({App:d,err:e}).catch(e=>console.error("Error rendering page: ",e))},_.default.createElement(U.AppRouterContext.Provider,{value:H.adaptForAppRouterInstance(n)},_.default.createElement(F.SearchParamsContext.Provider,{value:H.adaptForSearchParams(n)},_.default.createElement(H.PathnameContextProviderAdapter,{router:n,isAutoExport:null!=(t=self.__NEXT_DATA__.autoExport)&&t},_.default.createElement(w.RouterContext.Provider,{value:I.makePublicRouterInstance(n)},_.default.createElement(b.HeadManagerContext.Provider,{value:s},_.default.createElement(k.ImageConfigContext.Provider,{value:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image/",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1}},r)))))))}let $=e=>t=>{let r=y({},t,{Component:p,err:a.err,router:n});return _.default.createElement(Y,null,X(e,r))};function K(e){let{App:t,err:l}=e;return console.error(l),console.error("A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred"),i.loadPage("/_error").then(n=>{let{page:a,styleSheets:o}=n;return(null==u?void 0:u.Component)===a?Promise.resolve().then(()=>m(r(97345))).then(n=>Promise.resolve().then(()=>m(r(74297))).then(r=>(t=r.default,e.App=t,n))).then(e=>({ErrorComponent:e.default,styleSheets:[]})):{ErrorComponent:a,styleSheets:o}}).then(r=>{var i;let{ErrorComponent:s,styleSheets:u}=r,c=$(t),d={Component:s,AppTree:c,router:n,ctx:{err:l,pathname:a.page,query:a.query,asPath:o,AppTree:c}};return Promise.resolve((null==(i=e.props)?void 0:i.err)?e.props:O.loadGetInitialProps(t,d)).then(t=>eo(y({},e,{err:l,Component:s,styleSheets:u,props:t})))})}function J(e){let{callback:t}=e;return _.default.useLayoutEffect(()=>t(),[t]),null}let Q=null,ee=!0;function et(){["beforeRender","afterHydrate","afterRender","routeChange"].forEach(e=>performance.clearMarks(e))}function er(){O.ST&&(performance.mark("afterHydrate"),performance.measure("Next.js-before-hydration","navigationStart","beforeRender"),performance.measure("Next.js-hydration","beforeRender","afterHydrate"),f&&performance.getEntriesByName("Next.js-hydration").forEach(f),et())}function en(){if(!O.ST)return;performance.mark("afterRender");let e=performance.getEntriesByName("routeChange","mark");e.length&&(performance.measure("Next.js-route-change-to-render",e[0].name,"beforeRender"),performance.measure("Next.js-render","beforeRender","afterRender"),f&&(performance.getEntriesByName("Next.js-render").forEach(f),performance.getEntriesByName("Next.js-route-change-to-render").forEach(f)),et(),["Next.js-route-change-to-render","Next.js-render"].forEach(e=>performance.clearMeasures(e)))}function ea(e){let{callbacks:t,children:r}=e;return _.default.useLayoutEffect(()=>t.forEach(e=>e()),[t]),_.default.useEffect(()=>{L.default(f)},[]),r}function eo(e){let t,{App:r,Component:a,props:o,err:i}=e,s="initial"in e?void 0:e.styleSheets;a=a||u.Component,o=o||u.props;let d=y({},o,{Component:a,err:i,router:n});u=d;let f=!1,p=new Promise((e,r)=>{c&&c(),t=()=>{c=null,e()},c=()=>{f=!0,c=null;let e=Error("Cancel rendering route");e.cancelled=!0,r(e)}});function h(){t()}!function(){if(!s)return;let e=Z(document.querySelectorAll("style[data-n-href]")),t=new Set(e.map(e=>e.getAttribute("data-n-href"))),r=document.querySelector("noscript[data-n-css]"),n=null==r?void 0:r.getAttribute("data-n-css");s.forEach(e=>{let{href:r,text:a}=e;if(!t.has(r)){let e=document.createElement("style");e.setAttribute("data-n-href",r),e.setAttribute("media","x"),n&&e.setAttribute("nonce",n),document.head.appendChild(e),e.appendChild(document.createTextNode(a))}})}();let m=_.default.createElement(_.default.Fragment,null,_.default.createElement(J,{callback:function(){if(s&&!f){let e=new Set(s.map(e=>e.href)),t=Z(document.querySelectorAll("style[data-n-href]")),r=t.map(e=>e.getAttribute("data-n-href"));for(let n=0;n<r.length;++n)e.has(r[n])?t[n].removeAttribute("media"):t[n].setAttribute("media","x");let n=document.querySelector("noscript[data-n-css]");n&&s.forEach(e=>{let{href:t}=e,r=document.querySelector('style[data-n-href="'.concat(t,'"]'));r&&(n.parentNode.insertBefore(r,n.nextSibling),n=r)}),Z(document.querySelectorAll("link[data-n-p]")).forEach(e=>{e.parentNode.removeChild(e)})}if(e.scroll){let{x:t,y:r}=e.scroll;E.handleSmoothScroll(()=>{window.scrollTo(t,r)})}}}),_.default.createElement(Y,null,X(r,d),_.default.createElement(R.Portal,{type:"next-route-announcer"},_.default.createElement(T.RouteAnnouncer,null))));return!function(e,t){O.ST&&performance.mark("beforeRender");let r=t(ee?er:en);if(Q){let e=_.default.startTransition;e(()=>{Q.render(r)})}else Q=P.default.hydrateRoot(e,r,{onRecoverableError:W.default}),ee=!1}(l,e=>_.default.createElement(ea,{callbacks:[e,h]},_.default.createElement(_.default.StrictMode,null,m))),p}function ei(e){return el.apply(this,arguments)}function el(){return(el=g(function*(e){if(e.err){yield K(e);return}try{yield eo(e)}catch(r){let t=N.getProperError(r);if(t.cancelled)throw t;yield K(y({},e,{err:t}))}})).apply(this,arguments)}function es(){return(es=g(function*(e){let r=a.err;try{let e=yield i.routeLoader.whenEntrypoint("/_app");if("error"in e)throw e.error;let{component:t,exports:r}=e;d=t,r&&r.reportWebVitals&&(f=e=>{let t,{id:n,name:a,startTime:o,value:i,duration:l,entryType:s,entries:u,attribution:c}=e,d="".concat(Date.now(),"-").concat(Math.floor(Math.random()*(9e12-1))+1e12);u&&u.length&&(t=u[0].startTime);let f={id:n||d,name:a,startTime:o||t,value:null==i?l:i,label:"mark"===s||"measure"===s?"custom":"web-vital"};c&&(f.attribution=c),r.reportWebVitals(f)});let n=yield i.routeLoader.whenEntrypoint(a.page);if("error"in n)throw n.error;p=n.component}catch(e){r=N.getProperError(e)}window.__NEXT_PRELOADREADY&&(yield window.__NEXT_PRELOADREADY(a.dynamicIds)),t.router=n=I.createRouter(a.page,a.query,o,{initialProps:a.props,pageLoader:i,App:d,Component:p,wrapApp:$,err:r,isFallback:Boolean(a.isFallback),subscription:(e,t,r)=>ei(Object.assign({},e,{App:t,scroll:r})),locale:a.locale,locales:a.locales,defaultLocale:h,domainLocales:a.domainLocales,isPreview:a.isPreview}),z=yield n._initialMatchesMiddlewarePromise;let l={App:d,initial:!0,Component:p,props:a.props,err:r};(null==e?void 0:e.beforeRender)&&(yield e.beforeRender()),ei(l)})).apply(this,arguments)}("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)},21783:function(e,t,r){"use strict";var n=r(84534);window.next={version:n.version,get router(){return n.router},emitter:n.emitter},n.initialize({}).then(()=>n.hydrate()).catch(console.error),("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)},52700:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizePathTrailingSlash=void 0;var n=r(40012),a=r(26727);let o=e=>{if(!e.startsWith("/"))return e;let{pathname:t,query:r,hash:o}=a.parsePath(e);return/\.[^/]+\/?$/.test(t)?"".concat(n.removeTrailingSlash(t)).concat(r).concat(o):t.endsWith("/")?"".concat(t).concat(r).concat(o):"".concat(t,"/").concat(r).concat(o)};t.normalizePathTrailingSlash=o,("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)},86954:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let r=e.digest||t.digest,a="function"==typeof reportError?reportError:e=>{window.console.error(e)};r!==n.NEXT_DYNAMIC_NO_SSR_CODE&&a(e)};var n=r(75680);("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)},70976:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=r(92648).Z,a=r(33468),o=r(18074),i=n(r(27929)),l=r(54465),s=r(86238),u=r(22864),c=r(40012),d=r(82497);t.default=class{getPageList(){return d.getClientBuildManifest().then(e=>e.sortedPages)}getMiddleware(){return window.__MIDDLEWARE_MATCHERS=[],window.__MIDDLEWARE_MATCHERS}getDataHref(e){let{asPath:t,href:r,locale:n}=e,{pathname:d,query:f,search:p}=u.parseRelativeUrl(r),{pathname:h}=u.parseRelativeUrl(t),m=c.removeTrailingSlash(d);if("/"!==m[0])throw Error('Route name should start with a "/", got "'.concat(m,'"'));return(e=>{let t=i.default(c.removeTrailingSlash(l.addLocale(e,n)),".json");return a.addBasePath("/_next/data/".concat(this.buildId).concat(t).concat(p),!0)})(e.skipInterpolation?h:s.isDynamicRoute(m)?o.interpolateAs(d,h,f).result:m)}_isSsg(e){return this.promisedSsgManifest.then(t=>t.has(e))}loadPage(e){return this.routeLoader.loadRoute(e).then(e=>{if("component"in e)return{page:e.component,mod:e.exports,styleSheets:e.styles.map(e=>({href:e.href,text:e.content}))};throw e.error})}prefetch(e){return this.routeLoader.prefetch(e)}constructor(e,t){this.routeLoader=d.createRouteLoader(t),this.buildId=e,this.assetPrefix=t,this.promisedSsgManifest=new Promise(e=>{window.__SSG_MANIFEST?e(window.__SSG_MANIFEST):window.__SSG_MANIFEST_CB=()=>{e(window.__SSG_MANIFEST)}})}},("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)},659:function(e,t,r){"use strict";let n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;let a=["CLS","FCP","FID","INP","LCP","TTFB"];location.href;let o=!1;function i(e){n&&n(e)}var l=e=>{if(n=e,!o)for(let e of(o=!0,a))try{let t;t||(t=r(78018)),t["on".concat(e)](i)}catch(t){console.warn("Failed to track ".concat(e," web-vital"),t)}};t.default=l,("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)},17345:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Portal=void 0;var n=r(67294),a=r(73935);let o=e=>{let{children:t,type:r}=e,[o,i]=n.useState(null);return n.useEffect(()=>{let e=document.createElement(r);return document.body.appendChild(e),i(e),()=>{document.body.removeChild(e)}},[r]),o?a.createPortal(t,o):null};t.Portal=o,("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)},82813:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeBasePath=function(e){return(e=e.slice(0)).startsWith("/")||(e="/".concat(e)),e},r(10928),("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)},66876:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeLocale=function(e,t){return e},r(26727),("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)},44686:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.cancelIdleCallback=t.requestIdleCallback=void 0;let r="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let t=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)};t.requestIdleCallback=r;let n="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};t.cancelIdleCallback=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)},18483:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.RouteAnnouncer=void 0;var n=(0,r(92648).Z)(r(67294)),a=r(80880);let o={border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"},i=()=>{let{asPath:e}=a.useRouter(),[t,r]=n.default.useState(""),i=n.default.useRef(e);return n.default.useEffect(()=>{if(i.current!==e){if(i.current=e,document.title)r(document.title);else{var t;let n=document.querySelector("h1"),a=null!=(t=null==n?void 0:n.innerText)?t:null==n?void 0:n.textContent;r(a||e)}}},[e]),n.default.createElement("p",{"aria-live":"assertive",id:"__next-route-announcer__",role:"alert",style:o},t)};t.RouteAnnouncer=i,t.default=i,("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)},82497:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.markAssetError=l,t.isAssetError=function(e){return e&&i in e},t.getClientBuildManifest=c,t.createRouteLoader=function(e){let t=new Map,r=new Map,n=new Map,i=new Map;function c(e){{var t;let n=r.get(e.toString());return n||(document.querySelector('script[src^="'.concat(e,'"]'))?Promise.resolve():(r.set(e.toString(),n=new Promise((r,n)=>{(t=document.createElement("script")).onload=r,t.onerror=()=>n(l(Error("Failed to load script: ".concat(e)))),t.crossOrigin=void 0,t.src=e,document.body.appendChild(t)})),n))}}function f(e){let t=n.get(e);return t||n.set(e,t=fetch(e).then(t=>{if(!t.ok)throw Error("Failed to load stylesheet: ".concat(e));return t.text().then(t=>({href:e,content:t}))}).catch(e=>{throw l(e)})),t}return{whenEntrypoint:e=>o(e,t),onEntrypoint(e,r){(r?Promise.resolve().then(()=>r()).then(e=>({component:e&&e.default||e,exports:e}),e=>({error:e})):Promise.resolve(void 0)).then(r=>{let n=t.get(e);n&&"resolve"in n?r&&(t.set(e,r),n.resolve(r)):(r?t.set(e,r):t.delete(e),i.delete(e))})},loadRoute(r,n){return o(r,i,()=>{let a;return u(d(e,r).then(e=>{let{scripts:n,css:a}=e;return Promise.all([t.has(r)?[]:Promise.all(n.map(c)),Promise.all(a.map(f))])}).then(e=>this.whenEntrypoint(r).then(t=>({entrypoint:t,styles:e[1]}))),3800,l(Error("Route did not complete loading: ".concat(r)))).then(e=>{let{entrypoint:t,styles:r}=e,n=Object.assign({styles:r},t);return"error"in t?t:n}).catch(e=>{if(n)throw e;return{error:e}}).finally(()=>null==a?void 0:a())})},prefetch(t){let r;return(r=navigator.connection)&&(r.saveData||/2g/.test(r.effectiveType))?Promise.resolve():d(e,t).then(e=>Promise.all(s?e.scripts.map(e=>{var t,r,n;return t=e.toString(),r="script",new Promise((e,a)=>{let o='\n      link[rel="prefetch"][href^="'.concat(t,'"],\n      link[rel="preload"][href^="').concat(t,'"],\n      script[src^="').concat(t,'"]');if(document.querySelector(o))return e();n=document.createElement("link"),r&&(n.as=r),n.rel="prefetch",n.crossOrigin=void 0,n.onload=e,n.onerror=()=>a(l(Error("Failed to prefetch: ".concat(t)))),n.href=t,document.head.appendChild(n)})}):[])).then(()=>{a.requestIdleCallback(()=>this.loadRoute(t,!0).catch(()=>{}))}).catch(()=>{})}}},(0,r(92648).Z)(r(27929));var n=r(65407),a=r(44686);function o(e,t,r){let n,a=t.get(e);if(a)return"future"in a?a.future:Promise.resolve(a);let o=new Promise(e=>{n=e});return t.set(e,a={resolve:n,future:o}),r?r().then(e=>(n(e),e)).catch(r=>{throw t.delete(e),r}):o}let i=Symbol("ASSET_LOAD_ERROR");function l(e){return Object.defineProperty(e,i,{})}let s=function(e){try{return e=document.createElement("link"),!!window.MSInputMethodContext&&!!document.documentMode||e.relList.supports("prefetch")}catch(e){return!1}}();function u(e,t,r){return new Promise((n,o)=>{let i=!1;e.then(e=>{i=!0,n(e)}).catch(o),a.requestIdleCallback(()=>setTimeout(()=>{i||o(r)},t))})}function c(){if(self.__BUILD_MANIFEST)return Promise.resolve(self.__BUILD_MANIFEST);let e=new Promise(e=>{let t=self.__BUILD_MANIFEST_CB;self.__BUILD_MANIFEST_CB=()=>{e(self.__BUILD_MANIFEST),t&&t()}});return u(e,3800,l(Error("Failed to load client build manifest")))}function d(e,t){return c().then(r=>{if(!(t in r))throw l(Error("Failed to lookup route: ".concat(t)));let a=r[t].map(t=>e+"/_next/"+encodeURI(t));return{scripts:a.filter(e=>e.endsWith(".js")).map(e=>n.__unsafeCreateTrustedScriptURL(e)),css:a.filter(e=>e.endsWith(".css"))}})}("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)},80880:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Router",{enumerable:!0,get:function(){return o.default}}),Object.defineProperty(t,"withRouter",{enumerable:!0,get:function(){return s.default}}),t.useRouter=function(){let e=a.default.useContext(i.RouterContext);if(!e)throw Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");return e},t.createRouter=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return u.router=new o.default(...t),u.readyCallbacks.forEach(e=>e()),u.readyCallbacks=[],u.router},t.makePublicRouterInstance=function(e){let t={};for(let r of c){if("object"==typeof e[r]){t[r]=Object.assign(Array.isArray(e[r])?[]:{},e[r]);continue}t[r]=e[r]}return t.events=o.default.events,d.forEach(r=>{t[r]=function(){for(var t=arguments.length,n=Array(t),a=0;a<t;a++)n[a]=arguments[a];return e[r](...n)}}),t},t.default=void 0;var n=r(92648).Z,a=n(r(67294)),o=n(r(41003)),i=r(72692),l=n(r(80676)),s=n(r(49977));let u={router:null,readyCallbacks:[],ready(e){if(this.router)return e();this.readyCallbacks.push(e)}},c=["pathname","route","query","asPath","components","isFallback","basePath","locale","locales","defaultLocale","isReady","isPreview","isLocaleDomain","domainLocales"],d=["push","replace","reload","back","prefetch","beforePopState"];function f(){if(!u.router)throw Error('No router instance found.\nYou should only use "next/router" on the client side of your app.\n');return u.router}Object.defineProperty(u,"events",{get:()=>o.default.events}),c.forEach(e=>{Object.defineProperty(u,e,{get(){let t=f();return t[e]}})}),d.forEach(e=>{u[e]=function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];let a=f();return a[e](...r)}}),["routeChangeStart","beforeHistoryChange","routeChangeComplete","routeChangeError","hashChangeStart","hashChangeComplete"].forEach(e=>{u.ready(()=>{o.default.events.on(e,function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];let a="on".concat(e.charAt(0).toUpperCase()).concat(e.substring(1));if(u[a])try{u[a](...r)}catch(e){console.error("Error when running the Router event: ".concat(a)),console.error(l.default(e)?"".concat(e.message,"\n").concat(e.stack):e+"")}})})}),t.default=u,("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)},63573:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleClientScriptLoad=g,t.initScriptLoader=function(e){e.forEach(g),function(){let e=[...document.querySelectorAll('[data-nscript="beforeInteractive"]'),...document.querySelectorAll('[data-nscript="beforePageRender"]')];e.forEach(e=>{let t=e.id||e.getAttribute("src");p.add(t)})}()},t.default=void 0;var n=r(6495).Z,a=r(92648).Z,o=r(91598).Z,i=r(17273).Z,l=a(r(73935)),s=o(r(67294)),u=r(4664),c=r(31831),d=r(44686);let f=new Map,p=new Set,h=["onLoad","onReady","dangerouslySetInnerHTML","children","onError","strategy"],m=e=>{let{src:t,id:r,onLoad:n=()=>{},onReady:a=null,dangerouslySetInnerHTML:o,children:i="",strategy:l="afterInteractive",onError:s}=e,u=r||t;if(u&&p.has(u))return;if(f.has(t)){p.add(u),f.get(t).then(n,s);return}let d=()=>{a&&a(),p.add(u)},m=document.createElement("script"),g=new Promise((e,t)=>{m.addEventListener("load",function(t){e(),n&&n.call(this,t),d()}),m.addEventListener("error",function(e){t(e)})}).catch(function(e){s&&s(e)});for(let[r,n]of(o?(m.innerHTML=o.__html||"",d()):i?(m.textContent="string"==typeof i?i:Array.isArray(i)?i.join(""):"",d()):t&&(m.src=t,f.set(t,g)),Object.entries(e))){if(void 0===n||h.includes(r))continue;let e=c.DOMAttributeNames[r]||r.toLowerCase();m.setAttribute(e,n)}"worker"===l&&m.setAttribute("type","text/partytown"),m.setAttribute("data-nscript",l),document.body.appendChild(m)};function g(e){let{strategy:t="afterInteractive"}=e;"lazyOnload"===t?window.addEventListener("load",()=>{d.requestIdleCallback(()=>m(e))}):m(e)}function y(e){let{id:t,src:r="",onLoad:a=()=>{},onReady:o=null,strategy:c="afterInteractive",onError:f}=e,h=i(e,["id","src","onLoad","onReady","strategy","onError"]),{updateScripts:g,scripts:y,getIsSsr:v,appDir:_,nonce:P}=s.useContext(u.HeadManagerContext),b=s.useRef(!1);s.useEffect(()=>{let e=t||r;b.current||(o&&e&&p.has(e)&&o(),b.current=!0)},[o,t,r]);let S=s.useRef(!1);if(s.useEffect(()=>{!S.current&&("afterInteractive"===c?m(e):"lazyOnload"===c&&("complete"===document.readyState?d.requestIdleCallback(()=>m(e)):window.addEventListener("load",()=>{d.requestIdleCallback(()=>m(e))})),S.current=!0)},[e,c]),("beforeInteractive"===c||"worker"===c)&&(g?(y[c]=(y[c]||[]).concat([n({id:t,src:r,onLoad:a,onReady:o,onError:f},h)]),g(y)):v&&v()?p.add(t||r):v&&!v()&&m(e)),_){if("beforeInteractive"===c)return r?(l.default.preload(r,h.integrity?{as:"script",integrity:h.integrity}:{as:"script"}),s.default.createElement("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push(".concat(JSON.stringify([r]),")")}})):(h.dangerouslySetInnerHTML&&(h.children=h.dangerouslySetInnerHTML.__html,delete h.dangerouslySetInnerHTML),s.default.createElement("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push(".concat(JSON.stringify([0,n({},h)]),")")}}));"afterInteractive"===c&&r&&l.default.preload(r,h.integrity?{as:"script",integrity:h.integrity}:{as:"script"})}return null}Object.defineProperty(y,"__nextScript",{value:!0}),t.default=y,("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)},65407:function(e,t){"use strict";let r;Object.defineProperty(t,"__esModule",{value:!0}),t.__unsafeCreateTrustedScriptURL=function(e){var t;return(null==(t=function(){if(void 0===r){var e;r=(null==(e=window.trustedTypes)?void 0:e.createPolicy("nextjs",{createHTML:e=>e,createScript:e=>e,createScriptURL:e=>e}))||null}return r}())?void 0:t.createScriptURL(e))||e},("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)},49977:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){function t(t){return n.default.createElement(e,Object.assign({router:a.useRouter()},t))}return t.getInitialProps=e.getInitialProps,t.origGetInitialProps=e.origGetInitialProps,t};var n=(0,r(92648).Z)(r(67294)),a=r(80880);("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)},74297:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,a=r(60932).Z,o=(0,r(92648).Z)(r(67294)),i=r(670);function l(e){return s.apply(this,arguments)}function s(){return(s=a(function*(e){let{Component:t,ctx:r}=e,n=yield i.loadGetInitialProps(t,r);return{pageProps:n}})).apply(this,arguments)}class u extends(n=o.default.Component){render(){let{Component:e,pageProps:t}=this.props;return o.default.createElement(e,Object.assign({},t))}}u.origGetInitialProps=l,u.getInitialProps=l,t.default=u,("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)},97345:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,a=r(92648).Z,o=a(r(67294)),i=a(r(83121));let l={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"};function s(e){let{res:t,err:r}=e,n=t&&t.statusCode?t.statusCode:r?r.statusCode:404;return{statusCode:n}}let u={error:{fontFamily:'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left"},h1:{display:"inline-block",margin:"0 20px 0 0",paddingRight:23,fontSize:24,fontWeight:500,verticalAlign:"top",lineHeight:"49px"},h2:{fontSize:14,fontWeight:400,lineHeight:"49px",margin:0}};class c extends(n=o.default.Component){render(){let{statusCode:e,withDarkMode:t=!0}=this.props,r=this.props.title||l[e]||"An unexpected error has occurred";return o.default.createElement("div",{style:u.error},o.default.createElement(i.default,null,o.default.createElement("title",null,e?"".concat(e,": ").concat(r):"Application error: a client-side exception has occurred")),o.default.createElement("div",null,o.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}".concat(t?"@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}":"")}}),e?o.default.createElement("h1",{className:"next-error-h1",style:u.h1},e):null,o.default.createElement("div",{style:u.desc},o.default.createElement("h2",{style:u.h2},this.props.title||e?r:o.default.createElement(o.default.Fragment,null,"Application error: a client-side exception has occurred (see the browser console for more information)"),"."))))}}c.displayName="ErrorPage",c.getInitialProps=s,c.origGetInitialProps=s,t.default=c,("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)},40610:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.AmpStateContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext({});t.AmpStateContext=a},40532:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isInAmpMode=function(){let{ampFirst:e=!1,hybrid:t=!1,hasQuery:r=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e||t&&r}},48245:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TemplateContext=t.GlobalLayoutRouterContext=t.LayoutRouterContext=t.AppRouterContext=t.CacheStates=void 0;var n,a,o=(0,r(92648).Z)(r(67294));t.CacheStates=n,(a=n||(t.CacheStates=n={})).LAZY_INITIALIZED="LAZYINITIALIZED",a.DATA_FETCH="DATAFETCH",a.READY="READY";let i=o.default.createContext(null);t.AppRouterContext=i;let l=o.default.createContext(null);t.LayoutRouterContext=l;let s=o.default.createContext(null);t.GlobalLayoutRouterContext=s;let u=o.default.createContext(null);t.TemplateContext=u},18659:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.escapeStringRegexp=function(e){return r.test(e)?e.replace(n,"\\$&"):e};let r=/[|\\{}()[\]^$+*?.-]/,n=/[|\\{}()[\]^$+*?.-]/g},4664:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.HeadManagerContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext({});t.HeadManagerContext=a},83121:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.defaultHead=c,t.default=void 0;var n=r(6495).Z,a=r(92648).Z,o=(0,r(91598).Z)(r(67294)),i=a(r(31436)),l=r(40610),s=r(4664),u=r(40532);function c(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[o.default.createElement("meta",{charSet:"utf-8"})];return e||t.push(o.default.createElement("meta",{name:"viewport",content:"width=device-width"})),t}function d(e,t){return"string"==typeof t||"number"==typeof t?e:t.type===o.default.Fragment?e.concat(o.default.Children.toArray(t.props.children).reduce((e,t)=>"string"==typeof t||"number"==typeof t?e:e.concat(t),[])):e.concat(t)}r(57238);let f=["name","httpEquiv","charSet","itemProp"];function p(e,t){let{inAmpMode:r}=t;return e.reduce(d,[]).reverse().concat(c(r).reverse()).filter(function(){let e=new Set,t=new Set,r=new Set,n={};return a=>{let o=!0,i=!1;if(a.key&&"number"!=typeof a.key&&a.key.indexOf("$")>0){i=!0;let t=a.key.slice(a.key.indexOf("$")+1);e.has(t)?o=!1:e.add(t)}switch(a.type){case"title":case"base":t.has(a.type)?o=!1:t.add(a.type);break;case"meta":for(let e=0,t=f.length;e<t;e++){let t=f[e];if(a.props.hasOwnProperty(t)){if("charSet"===t)r.has(t)?o=!1:r.add(t);else{let e=a.props[t],r=n[t]||new Set;("name"!==t||!i)&&r.has(e)?o=!1:(r.add(e),n[t]=r)}}}}return o}}()).reverse().map((e,t)=>{let a=e.key||t;if(!r&&"link"===e.type&&e.props.href&&["https://fonts.googleapis.com/css","https://use.typekit.net/"].some(t=>e.props.href.startsWith(t))){let t=n({},e.props||{});return t["data-href"]=t.href,t.href=void 0,t["data-optimized-fonts"]=!0,o.default.cloneElement(e,t)}return o.default.cloneElement(e,{key:a})})}t.default=function(e){let{children:t}=e,r=o.useContext(l.AmpStateContext),n=o.useContext(s.HeadManagerContext);return o.default.createElement(i.default,{reduceComponentsToState:p,headManager:n,inAmpMode:u.isInAmpMode(r)},t)},("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)},78914:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LayoutSegmentsContext=t.ParamsContext=t.PathnameContext=t.SearchParamsContext=void 0;var n=r(67294);let a=n.createContext(null);t.SearchParamsContext=a;let o=n.createContext(null);t.PathnameContext=o;let i=n.createContext(null);t.ParamsContext=i;let l=n.createContext(null);t.LayoutSegmentsContext=l},24769:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizeLocalePath=function(e,t){let r;let n=e.split("/");return(t||[]).some(t=>!!n[1]&&n[1].toLowerCase()===t.toLowerCase()&&(r=t,n.splice(1,1),e=n.join("/")||"/",!0)),{pathname:e,detectedLocale:r}}},28730:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ImageConfigContext=void 0;var n=(0,r(92648).Z)(r(67294)),a=r(10139);let o=n.default.createContext(a.imageConfigDefault);t.ImageConfigContext=o},10139:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.imageConfigDefault=t.VALID_LOADERS=void 0,t.VALID_LOADERS=["default","imgix","cloudinary","akamai","custom"],t.imageConfigDefault={deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",loaderFile:"",domains:[],disableStaticImages:!1,minimumCacheTTL:60,formats:["image/webp"],dangerouslyAllowSVG:!1,contentSecurityPolicy:"script-src 'none'; frame-src 'none'; sandbox;",contentDispositionType:"inline",remotePatterns:[],unoptimized:!1}},82849:function(e,t){"use strict";function r(e){return Object.prototype.toString.call(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.getObjectClassLabel=r,t.isPlainObject=function(e){if("[object Object]"!==r(e))return!1;let t=Object.getPrototypeOf(e);return null===t||t.hasOwnProperty("isPrototypeOf")}},75680:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NEXT_DYNAMIC_NO_SSR_CODE=void 0,t.NEXT_DYNAMIC_NO_SSR_CODE="DYNAMIC_SERVER_USAGE"},8550:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){let e=Object.create(null);return{on(t,r){(e[t]||(e[t]=[])).push(r)},off(t,r){e[t]&&e[t].splice(e[t].indexOf(r)>>>0,1)},emit(t){for(var r=arguments.length,n=Array(r>1?r-1:0),a=1;a<r;a++)n[a-1]=arguments[a];(e[t]||[]).slice().map(e=>{e(...n)})}}}},6301:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.denormalizePagePath=function(e){let t=a.normalizePathSep(e);return t.startsWith("/index/")&&!n.isDynamicRoute(t)?t.slice(6):"/index"!==t?t:"/"};var n=r(18588),a=r(49997)},49997:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.normalizePathSep=function(e){return e.replace(/\\/g,"/")}},72692:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.RouterContext=void 0;var n=(0,r(92648).Z)(r(67294));let a=n.default.createContext(null);t.RouterContext=a},60401:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.adaptForAppRouterInstance=function(e){return{back(){e.back()},forward(){e.forward()},refresh(){e.reload()},push(t){e.push(t)},replace(t){e.replace(t)},prefetch(t){e.prefetch(t)}}},t.adaptForSearchParams=function(e){return e.isReady&&e.query?function(e){let t=new URLSearchParams;for(let[r,n]of Object.entries(e))if(Array.isArray(n))for(let e of n)t.append(r,e);else void 0!==n&&t.append(r,n);return t}(e.query):new URLSearchParams},t.PathnameContextProviderAdapter=function(e){var{children:t,router:r}=e,n=a(e,["children","router"]);let s=o.useRef(n.isAutoExport),u=o.useMemo(()=>{let e;let t=s.current;if(t&&(s.current=!1),l.isDynamicRoute(r.pathname)&&(r.isFallback||t&&!r.isReady))return null;try{e=new URL(r.asPath,"http://f")}catch(e){return"/"}return e.pathname},[r.asPath,r.isFallback,r.isReady,r.pathname]);return o.default.createElement(i.PathnameContext.Provider,{value:u},t)};var n=r(91598).Z,a=r(17273).Z,o=n(r(67294)),i=r(78914),l=r(18588)},41003:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.matchesMiddleware=D,t.createKey=V,t.default=void 0;var n=r(60932).Z,a=r(6495).Z,o=r(92648).Z,i=r(91598).Z,l=r(40012),s=r(82497),u=r(63573),c=i(r(80676)),d=r(6301),f=r(24769),p=o(r(8550)),h=r(670),m=r(86238),g=r(22864);o(r(72431));var y=r(13156),v=r(54903),_=r(67795);r(84643);var P=r(26727),b=r(54465),S=r(66876),w=r(82813),E=r(33468),x=r(10928),j=r(79423),C=r(18756),O=r(57429),R=r(79002),M=r(62139),A=r(21754),L=r(17562),T=r(1978),I=r(18074),N=r(4146);function k(){return Object.assign(Error("Route Cancelled"),{cancelled:!0})}function D(e){return B.apply(this,arguments)}function B(){return(B=n(function*(e){let t=yield Promise.resolve(e.router.pageLoader.getMiddleware());if(!t)return!1;let{pathname:r}=P.parsePath(e.asPath),n=x.hasBasePath(r)?w.removeBasePath(r):r,a=E.addBasePath(b.addLocale(n,e.locale));return t.some(e=>RegExp(e.regexp).test(a))})).apply(this,arguments)}function U(e){let t=h.getLocationOrigin();return e.startsWith(t)?e.substring(t.length):e}function H(e,t,r){let[n,a]=T.resolveHref(e,t,!0),o=h.getLocationOrigin(),i=n.startsWith(o),l=a&&a.startsWith(o);n=U(n),a=a?U(a):a;let s=i?n:E.addBasePath(n),u=r?U(T.resolveHref(e,r)):a||n;return{url:s,as:l?u:E.addBasePath(u)}}function F(e,t){let r=l.removeTrailingSlash(d.denormalizePagePath(e));return"/404"===r||"/_error"===r?e:(t.includes(r)||t.some(t=>{if(m.isDynamicRoute(t)&&v.getRouteRegex(t).re.test(r))return e=t,!0}),l.removeTrailingSlash(e))}function W(e){return q.apply(this,arguments)}function q(){return(q=n(function*(e){let t=yield D(e);if(!t||!e.fetchData)return null;try{let t=yield e.fetchData(),r=yield function(e,t,r){let n={basePath:r.router.basePath,i18n:{locales:r.router.locales},trailingSlash:Boolean(!0)},o=t.headers.get("x-nextjs-rewrite"),i=o||t.headers.get("x-nextjs-matched-path"),u=t.headers.get("x-matched-path");if(!u||i||u.includes("__next_data_catchall")||u.includes("/_error")||u.includes("/404")||(i=u),i){if(i.startsWith("/")){let t=g.parseRelativeUrl(i),a=C.getNextPathnameInfo(t.pathname,{nextConfig:n,parseData:!0}),u=l.removeTrailingSlash(a.pathname);return Promise.all([r.router.pageLoader.getPageList(),s.getClientBuildManifest()]).then(n=>{let[i,{__rewrites:l}]=n,s=b.addLocale(a.pathname,a.locale);if(m.isDynamicRoute(s)||!o&&i.includes(f.normalizeLocalePath(w.removeBasePath(s),r.router.locales).pathname)){let r=C.getNextPathnameInfo(g.parseRelativeUrl(e).pathname,{parseData:!0});s=E.addBasePath(r.pathname),t.pathname=s}if(!i.includes(u)){let e=F(u,i);e!==u&&(u=e)}let c=i.includes(u)?u:F(f.normalizeLocalePath(w.removeBasePath(t.pathname),r.router.locales).pathname,i);if(m.isDynamicRoute(c)){let e=y.getRouteMatcher(v.getRouteRegex(c))(s);Object.assign(t.query,e||{})}return{type:"rewrite",parsedAs:t,resolvedHref:c}})}let t=P.parsePath(e),u=O.formatNextPathnameInfo(a({},C.getNextPathnameInfo(t.pathname,{nextConfig:n,parseData:!0}),{defaultLocale:r.router.defaultLocale,buildId:""}));return Promise.resolve({type:"redirect-external",destination:"".concat(u).concat(t.query).concat(t.hash)})}let c=t.headers.get("x-nextjs-redirect");if(c){if(c.startsWith("/")){let e=P.parsePath(c),t=O.formatNextPathnameInfo(a({},C.getNextPathnameInfo(e.pathname,{nextConfig:n,parseData:!0}),{defaultLocale:r.router.defaultLocale,buildId:""}));return Promise.resolve({type:"redirect-internal",newAs:"".concat(t).concat(e.query).concat(e.hash),newUrl:"".concat(t).concat(e.query).concat(e.hash)})}return Promise.resolve({type:"redirect-external",destination:c})}return Promise.resolve({type:"next"})}(t.dataHref,t.response,e);return{dataHref:t.dataHref,json:t.json,response:t.response,text:t.text,cacheKey:t.cacheKey,effect:r}}catch(e){return null}})).apply(this,arguments)}let Z=Symbol("SSG_DATA_NOT_FOUND");function z(e){try{return JSON.parse(e)}catch(e){return null}}function G(e){var t;let{dataHref:r,inflightCache:n,isPrefetch:a,hasMiddleware:o,isServerRender:i,parseJSON:l,persistCache:u,isBackground:c,unstable_skipClientCache:d}=e,{href:f}=new URL(r,window.location.href),p=e=>(function e(t,r,n){return fetch(t,{credentials:"same-origin",method:n.method||"GET",headers:Object.assign({},n.headers,{"x-nextjs-data":"1"})}).then(a=>!a.ok&&r>1&&a.status>=500?e(t,r-1,n):a)})(r,i?3:1,{headers:Object.assign({},a?{purpose:"prefetch"}:{},a&&o?{"x-middleware-prefetch":"1"}:{}),method:null!=(t=null==e?void 0:e.method)?t:"GET"}).then(t=>t.ok&&(null==e?void 0:e.method)==="HEAD"?{dataHref:r,response:t,text:"",json:{},cacheKey:f}:t.text().then(e=>{if(!t.ok){if(o&&[301,302,307,308].includes(t.status))return{dataHref:r,response:t,text:e,json:{},cacheKey:f};if(!o&&404===t.status){var n;if(null==(n=z(e))?void 0:n.notFound)return{dataHref:r,json:{notFound:Z},response:t,text:e,cacheKey:f}}let a=Error("Failed to load static props");throw i||s.markAssetError(a),a}return{dataHref:r,json:l?z(e):null,response:t,text:e,cacheKey:f}})).then(e=>(u&&"no-cache"!==e.response.headers.get("x-middleware-cache")||delete n[f],e)).catch(e=>{throw d||delete n[f],("Failed to fetch"===e.message||"NetworkError when attempting to fetch resource."===e.message||"Load failed"===e.message)&&s.markAssetError(e),e});return d&&u?p({}).then(e=>(n[f]=Promise.resolve(e),e)):void 0!==n[f]?n[f]:n[f]=p(c?{method:"HEAD"}:{})}function V(){return Math.random().toString(36).slice(2,10)}function X(e){let{url:t,router:r}=e;if(t===E.addBasePath(b.addLocale(r.asPath,r.locale)))throw Error("Invariant: attempted to hard navigate to the same URL ".concat(t," ").concat(location.href));window.location.href=t}let Y=e=>{let{route:t,router:r}=e,n=!1,a=r.clc=()=>{n=!0},o=()=>{if(n){let e=Error('Abort fetching component for route: "'.concat(t,'"'));throw e.cancelled=!0,e}a===r.clc&&(r.clc=null)};return o};class ${reload(){window.location.reload()}back(){window.history.back()}forward(){window.history.forward()}push(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{url:e,as:t}=H(this,e,t),this.change("pushState",e,t,r)}replace(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{url:e,as:t}=H(this,e,t),this.change("replaceState",e,t,r)}change(e,t,r,o,i){var d=this;return n(function*(){let n,f;if(!M.isLocalURL(t))return X({url:t,router:d}),!1;let p=1===o._h,j=p||o._shouldResolveHref||P.parsePath(t).pathname===P.parsePath(r).pathname,C=a({},d.state),O=!0!==d.isReady;d.isReady=!0;let A=d.isSsr;if(p||(d.isSsr=!1),p&&d.clc)return!1;let T=C.locale;h.ST&&performance.mark("routeChange");let{shallow:N=!1,scroll:B=!0}=o,U={shallow:N};d._inFlightRoute&&d.clc&&(A||$.events.emit("routeChangeError",k(),d._inFlightRoute,U),d.clc(),d.clc=null),r=E.addBasePath(b.addLocale(x.hasBasePath(r)?w.removeBasePath(r):r,o.locale,d.defaultLocale));let W=S.removeLocale(x.hasBasePath(r)?w.removeBasePath(r):r,C.locale);d._inFlightRoute=r;let q=T!==C.locale;if(!p&&d.onlyAHashChange(W)&&!q){C.asPath=W,$.events.emit("hashChangeStart",r,U),d.changeState(e,t,r,a({},o,{scroll:!1})),B&&d.scrollToHash(W);try{yield d.set(C,d.components[C.route],null)}catch(e){throw c.default(e)&&e.cancelled&&$.events.emit("routeChangeError",e,W,U),e}return $.events.emit("hashChangeComplete",r,U),!0}let z=g.parseRelativeUrl(t),{pathname:G,query:V}=z;try{[n,{__rewrites:f}]=yield Promise.all([d.pageLoader.getPageList(),s.getClientBuildManifest(),d.pageLoader.getMiddleware()])}catch(e){return X({url:r,router:d}),!1}d.urlIsNew(W)||q||(e="replaceState");let Y=r;G=G?l.removeTrailingSlash(w.removeBasePath(G)):G;let K=l.removeTrailingSlash(G),J=r.startsWith("/")&&g.parseRelativeUrl(r).pathname,Q=!!(J&&K!==J&&(!m.isDynamicRoute(K)||!y.getRouteMatcher(v.getRouteRegex(K))(J))),ee=!o.shallow&&(yield D({asPath:r,locale:C.locale,router:d}));if(p&&ee&&(j=!1),j&&"/_error"!==G&&(o._shouldResolveHref=!0,z.pathname=F(G,n),z.pathname===G||(G=z.pathname,z.pathname=E.addBasePath(G),ee||(t=_.formatWithValidation(z)))),!M.isLocalURL(r))return X({url:r,router:d}),!1;Y=S.removeLocale(w.removeBasePath(Y),C.locale),K=l.removeTrailingSlash(G);let et=!1;if(m.isDynamicRoute(K)){let e=g.parseRelativeUrl(Y),n=e.pathname,a=v.getRouteRegex(K);et=y.getRouteMatcher(a)(n);let o=K===n,i=o?I.interpolateAs(K,n,V):{};if(et&&(!o||i.result))o?r=_.formatWithValidation(Object.assign({},e,{pathname:i.result,query:L.omit(V,i.params)})):Object.assign(V,et);else{let e=Object.keys(a.groups).filter(e=>!V[e]&&!a.groups[e].optional);if(e.length>0&&!ee)throw Error((o?"The provided `href` (".concat(t,") value is missing query values (").concat(e.join(", "),") to be interpolated properly. "):"The provided `as` value (".concat(n,") is incompatible with the `href` value (").concat(K,"). "))+"Read more: https://nextjs.org/docs/messages/".concat(o?"href-interpolation-failed":"incompatible-href-as"))}}p||$.events.emit("routeChangeStart",r,U);let er="/404"===d.pathname||"/_error"===d.pathname;try{var en,ea,eo,ei,el,es,eu,ec;let l=yield d.getRouteInfo({route:K,pathname:G,query:V,as:r,resolvedAs:Y,routeProps:U,locale:C.locale,isPreview:C.isPreview,hasMiddleware:ee,unstable_skipClientCache:o.unstable_skipClientCache,isQueryUpdating:p&&!d.isFallback,isMiddlewareRewrite:Q});if("route"in l&&ee){K=G=l.route||K,U.shallow||(V=Object.assign({},l.query||{},V));let e=x.hasBasePath(z.pathname)?w.removeBasePath(z.pathname):z.pathname;if(et&&G!==e&&Object.keys(et).forEach(e=>{et&&V[e]===et[e]&&delete V[e]}),m.isDynamicRoute(G)){let e=!U.shallow&&l.resolvedAs?l.resolvedAs:E.addBasePath(b.addLocale(new URL(r,location.href).pathname,C.locale),!0),t=e;x.hasBasePath(t)&&(t=w.removeBasePath(t));let n=v.getRouteRegex(G),a=y.getRouteMatcher(n)(new URL(t,location.href).pathname);a&&Object.assign(V,a)}}if("type"in l){if("redirect-internal"===l.type)return d.change(e,l.newUrl,l.newAs,o);return X({url:l.destination,router:d}),new Promise(()=>{})}let s=l.Component;if(s&&s.unstable_scriptLoader){let e=[].concat(s.unstable_scriptLoader());e.forEach(e=>{u.handleClientScriptLoad(e.props)})}if((l.__N_SSG||l.__N_SSP)&&l.props){if(l.props.pageProps&&l.props.pageProps.__N_REDIRECT){o.locale=!1;let t=l.props.pageProps.__N_REDIRECT;if(t.startsWith("/")&&!1!==l.props.pageProps.__N_REDIRECT_BASE_PATH){let r=g.parseRelativeUrl(t);r.pathname=F(r.pathname,n);let{url:a,as:i}=H(d,t,t);return d.change(e,a,i,o)}return X({url:t,router:d}),new Promise(()=>{})}if(C.isPreview=!!l.props.__N_PREVIEW,l.props.notFound===Z){let e;try{yield d.fetchComponent("/404"),e="/404"}catch(t){e="/_error"}if(l=yield d.getRouteInfo({route:e,pathname:e,query:V,as:r,resolvedAs:Y,routeProps:{shallow:!1},locale:C.locale,isPreview:C.isPreview}),"type"in l)throw Error("Unexpected middleware effect on /404")}}p&&"/_error"===d.pathname&&(null==(en=self.__NEXT_DATA__.props)?void 0:null==(ea=en.pageProps)?void 0:ea.statusCode)===500&&(null==(eo=l.props)?void 0:eo.pageProps)&&(l.props.pageProps.statusCode=500);let f=o.shallow&&C.route===(null!=(ei=l.route)?ei:K),h=null!=(el=o.scroll)?el:!p&&!f,_=null!=i?i:h?{x:0,y:0}:null,P=a({},C,{route:K,pathname:G,query:V,asPath:W,isFallback:!1});if(p&&er){if(l=yield d.getRouteInfo({route:d.pathname,pathname:d.pathname,query:V,as:r,resolvedAs:Y,routeProps:{shallow:!1},locale:C.locale,isPreview:C.isPreview,isQueryUpdating:p&&!d.isFallback}),"type"in l)throw Error("Unexpected middleware effect on ".concat(d.pathname));"/_error"===d.pathname&&(null==(es=self.__NEXT_DATA__.props)?void 0:null==(eu=es.pageProps)?void 0:eu.statusCode)===500&&(null==(ec=l.props)?void 0:ec.pageProps)&&(l.props.pageProps.statusCode=500);try{yield d.set(P,l,_)}catch(e){throw c.default(e)&&e.cancelled&&$.events.emit("routeChangeError",e,W,U),e}return!0}$.events.emit("beforeHistoryChange",r,U),d.changeState(e,t,r,o);let S=p&&!_&&!O&&!q&&R.compareRouterStates(P,d.state);if(!S){try{yield d.set(P,l,_)}catch(e){if(e.cancelled)l.error=l.error||e;else throw e}if(l.error)throw p||$.events.emit("routeChangeError",l.error,W,U),l.error;p||$.events.emit("routeChangeComplete",r,U),h&&/#.+$/.test(r)&&d.scrollToHash(r)}return!0}catch(e){if(c.default(e)&&e.cancelled)return!1;throw e}})()}changeState(e,t,r){let n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};("pushState"!==e||h.getURL()!==r)&&(this._shallow=n.shallow,window.history[e]({url:t,as:r,options:n,__N:!0,key:this._key="pushState"!==e?this._key:V()},"",r))}handleRouteInfoError(e,t,r,a,o,i){var l=this;return n(function*(){if(console.error(e),e.cancelled)throw e;if(s.isAssetError(e)||i)throw $.events.emit("routeChangeError",e,a,o),X({url:a,router:l}),k();try{let n;let{page:a,styleSheets:o}=yield l.fetchComponent("/_error"),i={props:n,Component:a,styleSheets:o,err:e,error:e};if(!i.props)try{i.props=yield l.getInitialProps(a,{err:e,pathname:t,query:r})}catch(e){console.error("Error in error page `getInitialProps`: ",e),i.props={}}return i}catch(e){return l.handleRouteInfoError(c.default(e)?e:Error(e+""),t,r,a,o,!0)}})()}getRouteInfo(e){let{route:t,pathname:r,query:o,as:i,resolvedAs:s,routeProps:u,locale:d,hasMiddleware:p,isPreview:h,unstable_skipClientCache:m,isQueryUpdating:g,isMiddlewareRewrite:y}=e;var v=this;return n(function*(){let e=t;try{var P,b,S,E;let t=Y({route:e,router:v}),c=v.components[e];if(u.shallow&&c&&v.route===e)return c;p&&(c=void 0);let x=!c||"initial"in c?void 0:c,C={dataHref:v.pageLoader.getDataHref({href:_.formatWithValidation({pathname:r,query:o}),skipInterpolation:!0,asPath:s,locale:d}),hasMiddleware:!0,isServerRender:v.isSsr,parseJSON:!0,inflightCache:g?v.sbc:v.sdc,persistCache:!h,isPrefetch:!1,unstable_skipClientCache:m,isBackground:g},O=g&&!y?null:yield W({fetchData:()=>G(C),asPath:s,locale:d,router:v}).catch(e=>{if(g)return null;throw e});if(g&&(O?O.json=self.__NEXT_DATA__.props:O={json:self.__NEXT_DATA__.props}),t(),(null==O?void 0:null==(P=O.effect)?void 0:P.type)==="redirect-internal"||(null==O?void 0:null==(b=O.effect)?void 0:b.type)==="redirect-external")return O.effect;if((null==O?void 0:null==(S=O.effect)?void 0:S.type)==="rewrite"){let t=l.removeTrailingSlash(O.effect.resolvedHref),n=yield v.pageLoader.getPageList();if((!g||n.includes(t))&&(e=t,r=O.effect.resolvedHref,o=a({},o,O.effect.parsedAs.query),s=w.removeBasePath(f.normalizeLocalePath(O.effect.parsedAs.pathname,v.locales).pathname),c=v.components[e],u.shallow&&c&&v.route===e&&!p))return a({},c,{route:e})}if(j.isAPIRoute(e))return X({url:i,router:v}),new Promise(()=>{});let R=x||(yield v.fetchComponent(e).then(e=>({Component:e.page,styleSheets:e.styleSheets,__N_SSG:e.mod.__N_SSG,__N_SSP:e.mod.__N_SSP}))),M=null==O?void 0:null==(E=O.response)?void 0:E.headers.get("x-middleware-skip"),A=R.__N_SSG||R.__N_SSP;M&&(null==O?void 0:O.dataHref)&&delete v.sdc[O.dataHref];let{props:L,cacheKey:T}=yield v._getData(n(function*(){if(A){if((null==O?void 0:O.json)&&!M)return{cacheKey:O.cacheKey,props:O.json};let e=(null==O?void 0:O.dataHref)?O.dataHref:v.pageLoader.getDataHref({href:_.formatWithValidation({pathname:r,query:o}),asPath:s,locale:d}),t=yield G({dataHref:e,isServerRender:v.isSsr,parseJSON:!0,inflightCache:M?{}:v.sdc,persistCache:!h,isPrefetch:!1,unstable_skipClientCache:m});return{cacheKey:t.cacheKey,props:t.json||{}}}return{headers:{},props:yield v.getInitialProps(R.Component,{pathname:r,query:o,asPath:i,locale:d,locales:v.locales,defaultLocale:v.defaultLocale})}}));return R.__N_SSP&&C.dataHref&&T&&delete v.sdc[T],v.isPreview||!R.__N_SSG||g||G(Object.assign({},C,{isBackground:!0,persistCache:!1,inflightCache:v.sbc})).catch(()=>{}),L.pageProps=Object.assign({},L.pageProps),R.props=L,R.route=e,R.query=o,R.resolvedAs=s,v.components[e]=R,R}catch(e){return v.handleRouteInfoError(c.getProperError(e),r,o,i,u)}})()}set(e,t,r){return this.state=e,this.sub(t,this.components["/_app"].Component,r)}beforePopState(e){this._bps=e}onlyAHashChange(e){if(!this.asPath)return!1;let[t,r]=this.asPath.split("#"),[n,a]=e.split("#");return!!a&&t===n&&r===a||t===n&&r!==a}scrollToHash(e){let[,t=""]=e.split("#");if(""===t||"top"===t){N.handleSmoothScroll(()=>window.scrollTo(0,0));return}let r=decodeURIComponent(t),n=document.getElementById(r);if(n){N.handleSmoothScroll(()=>n.scrollIntoView());return}let a=document.getElementsByName(r)[0];a&&N.handleSmoothScroll(()=>a.scrollIntoView())}urlIsNew(e){return this.asPath!==e}prefetch(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};var o=this;return n(function*(){if(A.isBot(window.navigator.userAgent))return;let n=g.parseRelativeUrl(e),{pathname:i,query:s}=n,u=i,c=yield o.pageLoader.getPageList(),d=t,f=void 0!==r.locale?r.locale||void 0:o.locale,p=yield D({asPath:t,locale:f,router:o});n.pathname=F(n.pathname,c),m.isDynamicRoute(n.pathname)&&(i=n.pathname,n.pathname=i,Object.assign(s,y.getRouteMatcher(v.getRouteRegex(n.pathname))(P.parsePath(t).pathname)||{}),p||(e=_.formatWithValidation(n)));let h=yield W({fetchData:()=>G({dataHref:o.pageLoader.getDataHref({href:_.formatWithValidation({pathname:u,query:s}),skipInterpolation:!0,asPath:d,locale:f}),hasMiddleware:!0,isServerRender:o.isSsr,parseJSON:!0,inflightCache:o.sdc,persistCache:!o.isPreview,isPrefetch:!0}),asPath:t,locale:f,router:o});if((null==h?void 0:h.effect.type)==="rewrite"&&(n.pathname=h.effect.resolvedHref,i=h.effect.resolvedHref,s=a({},s,h.effect.parsedAs.query),d=h.effect.parsedAs.pathname,e=_.formatWithValidation(n)),(null==h?void 0:h.effect.type)==="redirect-external")return;let b=l.removeTrailingSlash(i);yield Promise.all([o.pageLoader._isSsg(b).then(t=>!!t&&G({dataHref:(null==h?void 0:h.json)?null==h?void 0:h.dataHref:o.pageLoader.getDataHref({href:e,asPath:d,locale:f}),isServerRender:!1,parseJSON:!0,inflightCache:o.sdc,persistCache:!o.isPreview,isPrefetch:!0,unstable_skipClientCache:r.unstable_skipClientCache||r.priority&&!0}).then(()=>!1)),o.pageLoader[r.priority?"loadPage":"prefetch"](b)])})()}fetchComponent(e){var t=this;return n(function*(){let r=Y({route:e,router:t});try{let n=yield t.pageLoader.loadPage(e);return r(),n}catch(e){throw r(),e}})()}_getData(e){let t=!1,r=()=>{t=!0};return this.clc=r,e().then(e=>{if(r===this.clc&&(this.clc=null),t){let e=Error("Loading initial props cancelled");throw e.cancelled=!0,e}return e})}_getFlightData(e){return G({dataHref:e,isServerRender:!0,parseJSON:!1,inflightCache:this.sdc,persistCache:!1,isPrefetch:!1}).then(e=>{let{text:t}=e;return{data:t}})}getInitialProps(e,t){let{Component:r}=this.components["/_app"],n=this._wrapApp(r);return t.AppTree=n,h.loadGetInitialProps(r,{AppTree:n,Component:e,router:this,ctx:t})}get route(){return this.state.route}get pathname(){return this.state.pathname}get query(){return this.state.query}get asPath(){return this.state.asPath}get locale(){return this.state.locale}get isFallback(){return this.state.isFallback}get isPreview(){return this.state.isPreview}constructor(e,t,r,{initialProps:n,pageLoader:a,App:o,wrapApp:i,Component:s,err:u,subscription:c,isFallback:d,locale:f,locales:p,defaultLocale:y,domainLocales:v,isPreview:P}){this.sdc={},this.sbc={},this.isFirstPopStateEvent=!0,this._key=V(),this.onPopState=e=>{let t;let{isFirstPopStateEvent:r}=this;this.isFirstPopStateEvent=!1;let n=e.state;if(!n){let{pathname:e,query:t}=this;this.changeState("replaceState",_.formatWithValidation({pathname:E.addBasePath(e),query:t}),h.getURL());return}if(n.__NA){window.location.reload();return}if(!n.__N||r&&this.locale===n.options.locale&&n.as===this.asPath)return;let{url:a,as:o,options:i,key:l}=n;this._key=l;let{pathname:s}=g.parseRelativeUrl(a);(!this.isSsr||o!==E.addBasePath(this.asPath)||s!==E.addBasePath(this.pathname))&&(!this._bps||this._bps(n))&&this.change("replaceState",a,o,Object.assign({},i,{shallow:i.shallow&&this._shallow,locale:i.locale||this.defaultLocale,_h:0}),t)};let b=l.removeTrailingSlash(e);this.components={},"/_error"!==e&&(this.components[b]={Component:s,initial:!0,props:n,err:u,__N_SSG:n&&n.__N_SSG,__N_SSP:n&&n.__N_SSP}),this.components["/_app"]={Component:o,styleSheets:[]},this.events=$.events,this.pageLoader=a;let S=m.isDynamicRoute(e)&&self.__NEXT_DATA__.autoExport;if(this.basePath="",this.sub=c,this.clc=null,this._wrapApp=i,this.isSsr=!0,this.isLocaleDomain=!1,this.isReady=!!(self.__NEXT_DATA__.gssp||self.__NEXT_DATA__.gip||self.__NEXT_DATA__.appGip&&!self.__NEXT_DATA__.gsp||!S&&!self.location.search),this.state={route:b,pathname:e,query:t,asPath:S?e:r,isPreview:!!P,locale:void 0,isFallback:d},this._initialMatchesMiddlewarePromise=Promise.resolve(!1),!r.startsWith("//")){let n={locale:f},a=h.getURL();this._initialMatchesMiddlewarePromise=D({router:this,locale:f,asPath:a}).then(o=>(n._shouldResolveHref=r!==e,this.changeState("replaceState",o?a:_.formatWithValidation({pathname:E.addBasePath(e),query:t}),a,n),o))}window.addEventListener("popstate",this.onPopState)}}$.events=p.default(),t.default=$},34441:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addLocale=function(e,t,r,o){return t&&t!==r&&(o||!a.pathHasPrefix(e.toLowerCase(),"/".concat(t.toLowerCase()))&&!a.pathHasPrefix(e.toLowerCase(),"/api"))?n.addPathPrefix(e,"/".concat(t)):e};var n=r(44135),a=r(93210)},44135:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPathPrefix=function(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:a,hash:o}=n.parsePath(e);return"".concat(t).concat(r).concat(a).concat(o)};var n=r(26727)},96074:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPathSuffix=function(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:a,hash:o}=n.parsePath(e);return"".concat(r).concat(t).concat(a).concat(o)};var n=r(26727)},79002:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.compareRouterStates=function(e,t){let r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=r.length;n--;){let a=r[n];if("query"===a){let r=Object.keys(e.query);if(r.length!==Object.keys(t.query).length)return!1;for(let n=r.length;n--;){let a=r[n];if(!t.query.hasOwnProperty(a)||e.query[a]!==t.query[a])return!1}}else if(!t.hasOwnProperty(a)||e[a]!==t[a])return!1}return!0}},57429:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatNextPathnameInfo=function(e){let t=i.addLocale(e.pathname,e.locale,e.buildId?void 0:e.defaultLocale,e.ignorePrefix);return(e.buildId||!e.trailingSlash)&&(t=n.removeTrailingSlash(t)),e.buildId&&(t=o.addPathSuffix(a.addPathPrefix(t,"/_next/data/".concat(e.buildId)),"/"===e.pathname?"index.json":".json")),t=a.addPathPrefix(t,e.basePath),!e.buildId&&e.trailingSlash?t.endsWith("/")?t:o.addPathSuffix(t,"/"):n.removeTrailingSlash(t)};var n=r(40012),a=r(44135),o=r(96074),i=r(34441)},67795:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.formatUrl=o,t.formatWithValidation=function(e){return o(e)},t.urlObjectKeys=void 0;var n=(0,r(91598).Z)(r(94919));let a=/https?|ftp|gopher|file/;function o(e){let{auth:t,hostname:r}=e,o=e.protocol||"",i=e.pathname||"",l=e.hash||"",s=e.query||"",u=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?u=t+e.host:r&&(u=t+(~r.indexOf(":")?"[".concat(r,"]"):r),e.port&&(u+=":"+e.port)),s&&"object"==typeof s&&(s=String(n.urlQueryToSearchParams(s)));let c=e.search||s&&"?".concat(s)||"";return o&&!o.endsWith(":")&&(o+=":"),e.slashes||(!o||a.test(o))&&!1!==u?(u="//"+(u||""),i&&"/"!==i[0]&&(i="/"+i)):u||(u=""),l&&"#"!==l[0]&&(l="#"+l),c&&"?"!==c[0]&&(c="?"+c),i=i.replace(/[?#]/g,encodeURIComponent),c=c.replace("#","%23"),"".concat(o).concat(u).concat(i).concat(c).concat(l)}t.urlObjectKeys=["auth","hash","host","hostname","href","path","pathname","port","protocol","query","search","slashes"]},27929:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r="/"===e?"/index":/^\/index(\/|$)/.test(e)?"/index".concat(e):"".concat(e);return r+t}},18756:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getNextPathnameInfo=function(e,t){var r;let{basePath:i,i18n:l,trailingSlash:s}=null!=(r=t.nextConfig)?r:{},u={pathname:e,trailingSlash:"/"!==e?e.endsWith("/"):s};if(i&&o.pathHasPrefix(u.pathname,i)&&(u.pathname=a.removePathPrefix(u.pathname,i),u.basePath=i),!0===t.parseData&&u.pathname.startsWith("/_next/data/")&&u.pathname.endsWith(".json")){let e=u.pathname.replace(/^\/_next\/data\//,"").replace(/\.json$/,"").split("/"),t=e[0];u.pathname="index"!==e[1]?"/".concat(e.slice(1).join("/")):"/",u.buildId=t}if(l){let e=n.normalizeLocalePath(u.pathname,l.locales);u.locale=null==e?void 0:e.detectedLocale,u.pathname=(null==e?void 0:e.pathname)||u.pathname}return u};var n=r(24769),a=r(22650),o=r(93210)},4146:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleSmoothScroll=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=document.documentElement,n=r.style.scrollBehavior;r.style.scrollBehavior="auto",t.dontForceLayout||r.getClientRects(),e(),r.style.scrollBehavior=n}},18588:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getSortedRoutes",{enumerable:!0,get:function(){return n.getSortedRoutes}}),Object.defineProperty(t,"isDynamicRoute",{enumerable:!0,get:function(){return a.isDynamicRoute}});var n=r(30566),a=r(86238)},18074:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.interpolateAs=function(e,t,r){let o="",i=a.getRouteRegex(e),l=i.groups,s=(t!==e?n.getRouteMatcher(i)(t):"")||r;o=e;let u=Object.keys(l);return u.every(e=>{let t=s[e]||"",{repeat:r,optional:n}=l[e],a="[".concat(r?"...":"").concat(e,"]");return n&&(a="".concat(t?"":"/","[").concat(a,"]")),r&&!Array.isArray(t)&&(t=[t]),(n||e in s)&&(o=o.replace(a,r?t.map(e=>encodeURIComponent(e)).join("/"):encodeURIComponent(t))||"/")})||(o=""),{params:u,result:o}};var n=r(13156),a=r(54903)},21754:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isBot=function(e){return/Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(e)}},86238:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isDynamicRoute=function(e){return r.test(e)};let r=/\/\[[^/]+?\](?=\/|$)/},62139:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isLocalURL=function(e){if(!n.isAbsoluteUrl(e))return!0;try{let t=n.getLocationOrigin(),r=new URL(e,t);return r.origin===t&&a.hasBasePath(r.pathname)}catch(e){return!1}};var n=r(670),a=r(10928)},17562:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.omit=function(e,t){let r={};return Object.keys(e).forEach(n=>{t.includes(n)||(r[n]=e[n])}),r}},26727:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parsePath=function(e){let t=e.indexOf("#"),r=e.indexOf("?"),n=r>-1&&(t<0||r<t);return n||t>-1?{pathname:e.substring(0,n?r:t),query:n?e.substring(r,t>-1?t:void 0):"",hash:t>-1?e.slice(t):""}:{pathname:e,query:"",hash:""}}},22864:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.parseRelativeUrl=function(e,t){let r=new URL(n.getLocationOrigin()),o=t?new URL(t,r):e.startsWith(".")?new URL(window.location.href):r,{pathname:i,searchParams:l,search:s,hash:u,href:c,origin:d}=new URL(e,o);if(d!==r.origin)throw Error("invariant: invalid relative URL, router received ".concat(e));return{pathname:i,query:a.searchParamsToUrlQuery(l),search:s,hash:u,href:c.slice(r.origin.length)}};var n=r(670),a=r(94919)},93210:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.pathHasPrefix=function(e,t){if("string"!=typeof e)return!1;let{pathname:r}=n.parsePath(e);return r===t||r.startsWith(t+"/")};var n=r(26727)},94919:function(e,t){"use strict";function r(e){return"string"!=typeof e&&("number"!=typeof e||isNaN(e))&&"boolean"!=typeof e?"":String(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.searchParamsToUrlQuery=function(e){let t={};return e.forEach((e,r)=>{void 0===t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]}),t},t.urlQueryToSearchParams=function(e){let t=new URLSearchParams;return Object.entries(e).forEach(e=>{let[n,a]=e;Array.isArray(a)?a.forEach(e=>t.append(n,r(e))):t.set(n,r(a))}),t},t.assign=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return r.forEach(t=>{Array.from(t.keys()).forEach(t=>e.delete(t)),t.forEach((t,r)=>e.append(r,t))}),e}},22650:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePathPrefix=function(e,t){if(n.pathHasPrefix(e,t)){let r=e.slice(t.length);return r.startsWith("/")?r:"/".concat(r)}return e};var n=r(93210)},40012:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=function(e){return e.replace(/\/$/,"")||"/"}},1978:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resolveHref=function(e,t,r){let d;let f="string"==typeof t?t:a.formatWithValidation(t),p=f.match(/^[a-zA-Z]{1,}:\/\//),h=p?f.slice(p[0].length):f,m=h.split("?");if((m[0]||"").match(/(\/\/|\\)/)){console.error("Invalid href passed to next/router: ".concat(f,", repeated forward-slashes (//) or backslashes \\ are not valid in the href"));let e=i.normalizeRepeatedSlashes(h);f=(p?p[0]:"")+e}if(!s.isLocalURL(f))return r?[f]:f;try{d=new URL(f.startsWith("#")?e.asPath:e.pathname,"http://n")}catch(e){d=new URL("/","http://n")}try{let e=new URL(f,d);e.pathname=l.normalizePathTrailingSlash(e.pathname);let t="";if(u.isDynamicRoute(e.pathname)&&e.searchParams&&r){let r=n.searchParamsToUrlQuery(e.searchParams),{result:i,params:l}=c.interpolateAs(e.pathname,e.pathname,r);i&&(t=a.formatWithValidation({pathname:i,hash:e.hash,query:o.omit(r,l)}))}let i=e.origin===d.origin?e.href.slice(e.origin.length):e.href;return r?[i,t||i]:i}catch(e){return r?[f]:f}};var n=r(94919),a=r(67795),o=r(17562),i=r(670),l=r(52700),s=r(62139),u=r(86238),c=r(18074)},13156:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getRouteMatcher=function(e){let{re:t,groups:r}=e;return e=>{let a=t.exec(e);if(!a)return!1;let o=e=>{try{return decodeURIComponent(e)}catch(e){throw new n.DecodeError("failed to decode param")}},i={};return Object.keys(r).forEach(e=>{let t=r[e],n=a[t.pos];void 0!==n&&(i[e]=~n.indexOf("/")?n.split("/").map(e=>o(e)):t.repeat?[o(n)]:o(n))}),i}};var n=r(670)},54903:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getRouteRegex=s,t.getNamedRouteRegex=function(e){let t=u(e);return n({},s(e),{namedRegex:"^".concat(t.namedParameterizedRoute,"(?:/)?$"),routeKeys:t.routeKeys})},t.getNamedMiddlewareRegex=function(e,t){let{parameterizedRoute:r}=l(e),{catchAll:n=!0}=t;if("/"===r)return{namedRegex:"^/".concat(n?".*":"","$")};let{namedParameterizedRoute:a}=u(e);return{namedRegex:"^".concat(a).concat(n?"(?:(/.*)?)":"","$")}};var n=r(6495).Z,a=r(18659),o=r(40012);function i(e){let t=e.startsWith("[")&&e.endsWith("]");t&&(e=e.slice(1,-1));let r=e.startsWith("...");return r&&(e=e.slice(3)),{key:e,repeat:r,optional:t}}function l(e){let t=o.removeTrailingSlash(e).slice(1).split("/"),r={},n=1;return{parameterizedRoute:t.map(e=>{if(!(e.startsWith("[")&&e.endsWith("]")))return"/".concat(a.escapeStringRegexp(e));{let{key:t,optional:a,repeat:o}=i(e.slice(1,-1));return r[t]={pos:n++,repeat:o,optional:a},o?a?"(?:/(.+?))?":"/(.+?)":"/([^/]+?)"}}).join(""),groups:r}}function s(e){let{parameterizedRoute:t,groups:r}=l(e);return{re:RegExp("^".concat(t,"(?:/)?$")),groups:r}}function u(e){let t,r;let n=o.removeTrailingSlash(e).slice(1).split("/"),l=(t=97,r=1,()=>{let e="";for(let n=0;n<r;n++)e+=String.fromCharCode(t),++t>122&&(r++,t=97);return e}),s={};return{namedParameterizedRoute:n.map(e=>{if(!(e.startsWith("[")&&e.endsWith("]")))return"/".concat(a.escapeStringRegexp(e));{let{key:t,optional:r,repeat:n}=i(e.slice(1,-1)),a=t.replace(/\W/g,""),o=!1;return(0===a.length||a.length>30)&&(o=!0),isNaN(parseInt(a.slice(0,1)))||(o=!0),o&&(a=l()),s[a]=t,n?r?"(?:/(?<".concat(a,">.+?))?"):"/(?<".concat(a,">.+?)"):"/(?<".concat(a,">[^/]+?)")}}).join(""),routeKeys:s}}},30566:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getSortedRoutes=function(e){let t=new r;return e.forEach(e=>t.insert(e)),t.smoosh()};class r{insert(e){this._insert(e.split("/").filter(Boolean),[],!1)}smoosh(){return this._smoosh()}_smoosh(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=[...this.children.keys()].sort();null!==this.slugName&&t.splice(t.indexOf("[]"),1),null!==this.restSlugName&&t.splice(t.indexOf("[...]"),1),null!==this.optionalRestSlugName&&t.splice(t.indexOf("[[...]]"),1);let r=t.map(t=>this.children.get(t)._smoosh("".concat(e).concat(t,"/"))).reduce((e,t)=>[...e,...t],[]);if(null!==this.slugName&&r.push(...this.children.get("[]")._smoosh("".concat(e,"[").concat(this.slugName,"]/"))),!this.placeholder){let t="/"===e?"/":e.slice(0,-1);if(null!=this.optionalRestSlugName)throw Error('You cannot define a route with the same specificity as a optional catch-all route ("'.concat(t,'" and "').concat(t,"[[...").concat(this.optionalRestSlugName,']]").'));r.unshift(t)}return null!==this.restSlugName&&r.push(...this.children.get("[...]")._smoosh("".concat(e,"[...").concat(this.restSlugName,"]/"))),null!==this.optionalRestSlugName&&r.push(...this.children.get("[[...]]")._smoosh("".concat(e,"[[...").concat(this.optionalRestSlugName,"]]/"))),r}_insert(e,t,n){if(0===e.length){this.placeholder=!1;return}if(n)throw Error("Catch-all must be the last part of the URL.");let a=e[0];if(a.startsWith("[")&&a.endsWith("]")){let r=a.slice(1,-1),i=!1;if(r.startsWith("[")&&r.endsWith("]")&&(r=r.slice(1,-1),i=!0),r.startsWith("...")&&(r=r.substring(3),n=!0),r.startsWith("[")||r.endsWith("]"))throw Error("Segment names may not start or end with extra brackets ('".concat(r,"')."));if(r.startsWith("."))throw Error("Segment names may not start with erroneous periods ('".concat(r,"')."));function o(e,r){if(null!==e&&e!==r)throw Error("You cannot use different slug names for the same dynamic path ('".concat(e,"' !== '").concat(r,"')."));t.forEach(e=>{if(e===r)throw Error('You cannot have the same slug name "'.concat(r,'" repeat within a single dynamic path'));if(e.replace(/\W/g,"")===a.replace(/\W/g,""))throw Error('You cannot have the slug names "'.concat(e,'" and "').concat(r,'" differ only by non-word symbols within a single dynamic path'))}),t.push(r)}if(n){if(i){if(null!=this.restSlugName)throw Error('You cannot use both an required and optional catch-all route at the same level ("[...'.concat(this.restSlugName,']" and "').concat(e[0],'" ).'));o(this.optionalRestSlugName,r),this.optionalRestSlugName=r,a="[[...]]"}else{if(null!=this.optionalRestSlugName)throw Error('You cannot use both an optional and required catch-all route at the same level ("[[...'.concat(this.optionalRestSlugName,']]" and "').concat(e[0],'").'));o(this.restSlugName,r),this.restSlugName=r,a="[...]"}}else{if(i)throw Error('Optional route parameters are not yet supported ("'.concat(e[0],'").'));o(this.slugName,r),this.slugName=r,a="[]"}}this.children.has(a)||this.children.set(a,new r),this.children.get(a)._insert(e.slice(1),t,n)}constructor(){this.placeholder=!0,this.children=new Map,this.slugName=null,this.restSlugName=null,this.optionalRestSlugName=null}}},86949:function(e,t){"use strict";let r;Object.defineProperty(t,"__esModule",{value:!0}),t.setConfig=function(e){r=e},t.default=void 0,t.default=()=>r,("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)},31436:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){let{headManager:t,reduceComponentsToState:r}=e;function l(){if(t&&t.mountedInstances){let a=n.Children.toArray(Array.from(t.mountedInstances).filter(Boolean));t.updateHead(r(a,e))}}if(a){var s;null==t||null==(s=t.mountedInstances)||s.add(e.children),l()}return o(()=>{var r;return null==t||null==(r=t.mountedInstances)||r.add(e.children),()=>{var r;null==t||null==(r=t.mountedInstances)||r.delete(e.children)}}),o(()=>(t&&(t._pendingUpdate=l),()=>{t&&(t._pendingUpdate=l)})),i(()=>(t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null),()=>{t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null)})),null};var n=(0,r(91598).Z)(r(67294));let a=!1,o=a?()=>{}:n.useLayoutEffect,i=a?()=>{}:n.useEffect},670:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.execOnce=function(e){let t,r=!1;return function(){for(var n=arguments.length,a=Array(n),o=0;o<n;o++)a[o]=arguments[o];return r||(r=!0,t=e(...a)),t}},t.getLocationOrigin=i,t.getURL=function(){let{href:e}=window.location,t=i();return e.substring(t.length)},t.getDisplayName=l,t.isResSent=s,t.normalizeRepeatedSlashes=function(e){let t=e.split("?"),r=t[0];return r.replace(/\\/g,"/").replace(/\/\/+/g,"/")+(t[1]?"?".concat(t.slice(1).join("?")):"")},t.loadGetInitialProps=u,t.ST=t.SP=t.isAbsoluteUrl=t.WEB_VITALS=void 0;var n=r(60932).Z;t.WEB_VITALS=["CLS","FCP","FID","INP","LCP","TTFB"];let a=/^[a-zA-Z][a-zA-Z\d+\-.]*?:/,o=e=>a.test(e);function i(){let{protocol:e,hostname:t,port:r}=window.location;return"".concat(e,"//").concat(t).concat(r?":"+r:"")}function l(e){return"string"==typeof e?e:e.displayName||e.name||"Unknown"}function s(e){return e.finished||e.headersSent}function u(e,t){return c.apply(this,arguments)}function c(){return(c=n(function*(e,t){let r=t.res||t.ctx&&t.ctx.res;if(!e.getInitialProps)return t.ctx&&t.Component?{pageProps:yield u(t.Component,t.ctx)}:{};let n=yield e.getInitialProps(t);if(r&&s(r))return n;if(!n){let t='"'.concat(l(e),'.getInitialProps()" should resolve to an object. But found "').concat(n,'" instead.');throw Error(t)}return n})).apply(this,arguments)}t.isAbsoluteUrl=o;let d="undefined"!=typeof performance;t.SP=d;let f=d&&["mark","measure","getEntriesByName"].every(e=>"function"==typeof performance[e]);t.ST=f,t.DecodeError=class extends Error{},t.NormalizeError=class extends Error{},t.PageNotFoundError=class extends Error{constructor(e){super(),this.code="ENOENT",this.message="Cannot find module for page: ".concat(e)}},t.MissingStaticPage=class extends Error{constructor(e,t){super(),this.message="Failed to load static file for page: ".concat(e," ").concat(t)}},t.MiddlewareNotFoundError=class extends Error{constructor(){super(),this.code="ENOENT",this.message="Cannot find the middleware module"}}},57238:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.warnOnce=void 0;let r=e=>{};t.warnOnce=r},78018:function(e){var t,r,n,a,o,i,l,s,u,c,d,f,p,h,m,g,y,v,_,P,b,S,w,E,x,j,C,O,R,M,A,L,T,I,N,k,D,B,U,H,F,W,q,Z,z,G;(t={}).d=function(e,r){for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},void 0!==t&&(t.ab="//"),r={},t.r(r),t.d(r,{getCLS:function(){return w},getFCP:function(){return P},getFID:function(){return M},getINP:function(){return W},getLCP:function(){return Z},getTTFB:function(){return G},onCLS:function(){return w},onFCP:function(){return P},onFID:function(){return M},onINP:function(){return W},onLCP:function(){return Z},onTTFB:function(){return G}}),s=-1,u=function(e){addEventListener("pageshow",function(t){t.persisted&&(s=t.timeStamp,e(t))},!0)},c=function(){return window.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},d=function(){var e=c();return e&&e.activationStart||0},f=function(e,t){var r=c(),n="navigate";return s>=0?n="back-forward-cache":r&&(n=document.prerendering||d()>0?"prerender":r.type.replace(/_/g,"-")),{name:e,value:void 0===t?-1:t,rating:"good",delta:0,entries:[],id:"v3-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:n}},p=function(e,t,r){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var n=new PerformanceObserver(function(e){t(e.getEntries())});return n.observe(Object.assign({type:e,buffered:!0},r||{})),n}}catch(e){}},h=function(e,t){var r=function r(n){"pagehide"!==n.type&&"hidden"!==document.visibilityState||(e(n),t&&(removeEventListener("visibilitychange",r,!0),removeEventListener("pagehide",r,!0)))};addEventListener("visibilitychange",r,!0),addEventListener("pagehide",r,!0)},m=function(e,t,r,n){var a,o;return function(i){var l;t.value>=0&&(i||n)&&((o=t.value-(a||0))||void 0===a)&&(a=t.value,t.delta=o,t.rating=(l=t.value)>r[1]?"poor":l>r[0]?"needs-improvement":"good",e(t))}},g=-1,y=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},v=function(){h(function(e){g=e.timeStamp},!0)},_=function(){return g<0&&(g=y(),v(),u(function(){setTimeout(function(){g=y(),v()},0)})),{get firstHiddenTime(){return g}}},P=function(e,t){t=t||{};var r,n=[1800,3e3],a=_(),o=f("FCP"),i=function(e){e.forEach(function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<a.firstHiddenTime&&(o.value=e.startTime-d(),o.entries.push(e),r(!0)))})},l=window.performance&&window.performance.getEntriesByName&&window.performance.getEntriesByName("first-contentful-paint")[0],s=l?null:p("paint",i);(l||s)&&(r=m(e,o,n,t.reportAllChanges),l&&i([l]),u(function(a){r=m(e,o=f("FCP"),n,t.reportAllChanges),requestAnimationFrame(function(){requestAnimationFrame(function(){o.value=performance.now()-a.timeStamp,r(!0)})})}))},b=!1,S=-1,w=function(e,t){t=t||{};var r=[.1,.25];b||(P(function(e){S=e.value}),b=!0);var n,a=function(t){S>-1&&e(t)},o=f("CLS",0),i=0,l=[],s=function(e){e.forEach(function(e){if(!e.hadRecentInput){var t=l[0],r=l[l.length-1];i&&e.startTime-r.startTime<1e3&&e.startTime-t.startTime<5e3?(i+=e.value,l.push(e)):(i=e.value,l=[e]),i>o.value&&(o.value=i,o.entries=l,n())}})},c=p("layout-shift",s);c&&(n=m(a,o,r,t.reportAllChanges),h(function(){s(c.takeRecords()),n(!0)}),u(function(){i=0,S=-1,n=m(a,o=f("CLS",0),r,t.reportAllChanges)}))},E={passive:!0,capture:!0},x=new Date,j=function(e,t){n||(n=t,a=e,o=new Date,R(removeEventListener),C())},C=function(){if(a>=0&&a<o-x){var e={entryType:"first-input",name:n.type,target:n.target,cancelable:n.cancelable,startTime:n.timeStamp,processingStart:n.timeStamp+a};i.forEach(function(t){t(e)}),i=[]}},O=function(e){if(e.cancelable){var t,r,n,a=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?(t=function(){j(a,e),n()},r=function(){n()},n=function(){removeEventListener("pointerup",t,E),removeEventListener("pointercancel",r,E)},addEventListener("pointerup",t,E),addEventListener("pointercancel",r,E)):j(a,e)}},R=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach(function(t){return e(t,O,E)})},M=function(e,t){t=t||{};var r,o=[100,300],l=_(),s=f("FID"),c=function(e){e.startTime<l.firstHiddenTime&&(s.value=e.processingStart-e.startTime,s.entries.push(e),r(!0))},d=function(e){e.forEach(c)},g=p("first-input",d);r=m(e,s,o,t.reportAllChanges),g&&h(function(){d(g.takeRecords()),g.disconnect()},!0),g&&u(function(){r=m(e,s=f("FID"),o,t.reportAllChanges),i=[],a=-1,n=null,R(addEventListener),i.push(c),C()})},A=0,L=1/0,T=0,I=function(e){e.forEach(function(e){e.interactionId&&(L=Math.min(L,e.interactionId),A=(T=Math.max(T,e.interactionId))?(T-L)/7+1:0)})},N=function(){return l?A:performance.interactionCount||0},k=function(){"interactionCount"in performance||l||(l=p("event",I,{type:"event",buffered:!0,durationThreshold:0}))},D=0,B=function(){return N()-D},U=[],H={},F=function(e){var t=U[U.length-1],r=H[e.interactionId];if(r||U.length<10||e.duration>t.latency){if(r)r.entries.push(e),r.latency=Math.max(r.latency,e.duration);else{var n={id:e.interactionId,latency:e.duration,entries:[e]};H[n.id]=n,U.push(n)}U.sort(function(e,t){return t.latency-e.latency}),U.splice(10).forEach(function(e){delete H[e.id]})}},W=function(e,t){t=t||{};var r=[200,500];k();var n,a=f("INP"),o=function(e){e.forEach(function(e){e.interactionId&&F(e),"first-input"!==e.entryType||U.some(function(t){return t.entries.some(function(t){return e.duration===t.duration&&e.startTime===t.startTime})})||F(e)});var t,r=(t=Math.min(U.length-1,Math.floor(B()/50)),U[t]);r&&r.latency!==a.value&&(a.value=r.latency,a.entries=r.entries,n())},i=p("event",o,{durationThreshold:t.durationThreshold||40});n=m(e,a,r,t.reportAllChanges),i&&(i.observe({type:"first-input",buffered:!0}),h(function(){o(i.takeRecords()),a.value<0&&B()>0&&(a.value=0,a.entries=[]),n(!0)}),u(function(){U=[],D=N(),n=m(e,a=f("INP"),r,t.reportAllChanges)}))},q={},Z=function(e,t){t=t||{};var r,n=[2500,4e3],a=_(),o=f("LCP"),i=function(e){var t=e[e.length-1];if(t){var n=t.startTime-d();n<a.firstHiddenTime&&(o.value=n,o.entries=[t],r())}},l=p("largest-contentful-paint",i);if(l){r=m(e,o,n,t.reportAllChanges);var s=function(){q[o.id]||(i(l.takeRecords()),l.disconnect(),q[o.id]=!0,r(!0))};["keydown","click"].forEach(function(e){addEventListener(e,s,{once:!0,capture:!0})}),h(s,!0),u(function(a){r=m(e,o=f("LCP"),n,t.reportAllChanges),requestAnimationFrame(function(){requestAnimationFrame(function(){o.value=performance.now()-a.timeStamp,q[o.id]=!0,r(!0)})})})}},z=function e(t){document.prerendering?addEventListener("prerenderingchange",function(){return e(t)},!0):"complete"!==document.readyState?addEventListener("load",function(){return e(t)},!0):setTimeout(t,0)},G=function(e,t){t=t||{};var r=[800,1800],n=f("TTFB"),a=m(e,n,r,t.reportAllChanges);z(function(){var o=c();if(o){if(n.value=Math.max(o.responseStart-d(),0),n.value<0||n.value>performance.now())return;n.entries=[o],a(!0),u(function(){(a=m(e,n=f("TTFB",0),r,t.reportAllChanges))(!0)})}})},e.exports=r},79423:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isAPIRoute=function(e){return"/api"===e||Boolean(null==e?void 0:e.startsWith("/api/"))}},80676:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=a,t.getProperError=function(e){return a(e)?e:Error(n.isPlainObject(e)?JSON.stringify(e):e+"")};var n=r(82849);function a(e){return"object"==typeof e&&null!==e&&"name"in e&&"message"in e}},72431:function(){}},function(e){e.O(0,[9774],function(){return e(e.s=21783)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/colors-generator-55b397ea41fc6dea.js b/_next/static/chunks/pages/colors-generator-55b397ea41fc6dea.js
deleted file mode 100644
index 140be09f14c..00000000000
--- a/_next/static/chunks/pages/colors-generator-55b397ea41fc6dea.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5318],{74241:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/colors-generator",function(){return n(77500)}])},8649:function(e,t,n){"use strict";n.d(t,{$:function(){return M}});var r=n(85893),o=n(67294),l=n(90512),i=n(51227),a=n(82827),s=n(46049),c=n(77048),u=n(74378),d=n(40624),m=n(55899),p=n(65623),h={socialButton:"m-fde4daed",socialButtonSection:"m-1df08738",discordButton:"m-6611c750",twitterButton:"m-a568e357"},f=n(95859),x=n(61830),_=Object.defineProperty,j=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,v=(e,t,n)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,y=(e,t)=>{for(var n in t||(t={}))b.call(t,n)&&v(e,n,t[n]);if(j)for(var n of j(t))g.call(t,n)&&v(e,n,t[n]);return e},w=(e,t)=>{var n={};for(var r in e)b.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&j)for(var r of j(e))0>t.indexOf(r)&&g.call(e,r)&&(n[r]=e[r]);return n};function k(e){var{icon:t}=e,n=w(e,["icon"]);return o.createElement(m.z,y({component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:t,radius:"md",classNames:{root:h.socialButton,section:h.socialButtonSection}},n))}function C(e){var{className:t}=e,n=w(e,["className"]);return o.createElement(k,y({className:(0,d.Z)(h.discordButton,t),icon:o.createElement(f.D,{size:16}),href:p.$.discordLink},n),"Join Discord community")}function N(e){var{className:t}=e,n=w(e,["className"]);return o.createElement(k,y({className:(0,d.Z)(h.twitterButton,t),icon:o.createElement(x.Z,{size:16}),href:p.$.twitterLink},n),"Follow Mantine on Twitter")}var F=n(93258),B=n(41664),z=n.n(B),O=n(16951),P=n.n(O);function T(e){let{data:t,title:n}=e,o=t.map((e,t)=>(0,r.jsx)(c.x,{className:P().link,component:"next"===e.type?z():"a",href:e.link,children:e.label},t));return(0,r.jsxs)("div",{className:P().wrapper,children:[(0,r.jsx)(c.x,{className:P().title,children:n}),o]})}let L=[{title:"About",data:[{type:"next",label:"Contribute",link:"/pages/contributing/"},{type:"next",label:"About Mantine",link:"/pages/about/"},{type:"next",label:"Changelog",link:"/pages/changelog/"},{type:"link",label:"Releases",link:p.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:p.$.discordLink},{type:"link",label:"Follow on Twitter",link:p.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:p.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:p.$.uiLink},{type:"link",label:"Documentation",link:p.$.docsLink},{type:"link",label:"Github organization",link:p.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:p.$.npmLink}]}];var E=n(80165),S=n.n(E);function M(e){let{withNavbar:t}=e,n=L.map(e=>(0,r.jsx)(T,{data:e.data,title:e.title},e.title));return(0,r.jsxs)("div",{className:S().root,children:[(0,r.jsx)("div",{className:S().spacer}),(0,r.jsx)(i.x,{mod:{"with-navbar":t},className:(0,l.Z)(S().wrapper,a.Z.classNames.fullWidth),children:(0,r.jsxs)(s.W,{size:1100,children:[(0,r.jsxs)("div",{className:S().inner,children:[(0,r.jsxs)("div",{className:S().logoSection,children:[(0,r.jsx)(F.T,{}),(0,r.jsx)(c.x,{className:S().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,r.jsx)("div",{className:S().groups,children:n})]}),(0,r.jsx)("div",{className:S().afterFooter,children:(0,r.jsxs)(u.Z,{justify:"space-between",wrap:"wrap",children:[(0,r.jsxs)(c.x,{fz:"xs",className:S().afterFooterNote,children:["Built by ",(0,r.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,r.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,r.jsxs)("div",{className:S().social,children:[(0,r.jsx)(C,{className:S().socialButton}),(0,r.jsx)(N,{className:S().socialButton})]})]})})]})})]})}},31144:function(e,t,n){"use strict";n.d(t,{_:function(){return a}});var r=n(85893);n(67294);var o=n(8649),l=n(21616),i=n.n(l);function a(e){let{children:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:i().content,children:t}),(0,r.jsx)(o.$,{withNavbar:!0})]})}},77500:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return U}});var r=n(85893),o=n(67294),l=n(9008),i=n.n(l),a=n(31144),s=n(90512),c=n(94185),u=n.n(c);function d(e){let{className:t,children:n,...o}=e;return(0,r.jsx)("div",{className:(0,s.Z)(u().wrapper,t),...o,children:(0,r.jsx)("div",{className:u().container,children:n})})}function m(e){let{title:t,...n}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i(),{children:(0,r.jsx)("title",{children:"".concat(t," | Mantine")})}),(0,r.jsx)(a._,{children:(0,r.jsx)(d,{...n})})]})}var p=n(11163),h=n(20761),f=n(8298),x=n.n(f);let _=[.96,.907,.805,.697,.605,.547,.518,.445,.395,.34],j=[.32,.16,.08,.04,0,0,.04,.08,.16,.32];var b=n(95443),g=n(87578),v=n(27499);function y(e){let t=e/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4}var w=n(74378),k=n(43066),C=n.n(k);function N(e){let{colors:t,baseColorIndex:n,displayColorsInfo:o}=e,l=t.map((e,t)=>(0,r.jsx)("div",{className:C().item,children:(0,r.jsx)(g.b,{color:e.hex(),radius:0,className:C().swatch,withShadow:!1,"data-base":t===n||void 0,c:!function(e,t=.179){return function(e){let t=y(e.r),n=y(e.g),r=y(e.b);return .2126*t+.7152*n+.0722*r}((0,v.c)(e))>t}(e.hex())?"white":"black",children:o&&(0,r.jsxs)("div",{className:C().label,children:[(0,r.jsx)("span",{className:C().index,children:t}),(0,r.jsx)("span",{className:C().hex,children:e.hex()})]})})},t));return(0,r.jsx)(w.Z,{gap:0,wrap:"nowrap",className:C().root,children:l})}var F=n(28670),B=n.n(F),z=n(88198),O=n(93625),P=n(9410),T=n(55899),L=n(31577),E=n(91377),S=n(4741),M=n(46393),D=n(68267);let I=[{name:"Blue gray",color:"#63687C"},{name:"Brown",color:"#5D4037"},{name:"Tomato",color:"#F06418"},{name:"Deep orange",color:"#fc8a08"},{name:"Bright orange",color:"#FFA903"},{name:"Yellow",color:"#D9D02F"},{name:"Bright green",color:"#6BD731"},{name:"Green",color:"#2BDD66"},{name:"Light blue",color:"#00B5FF"},{name:"Sky blue",color:"#099CFF"},{name:"Pale blue",color:"#5474B4"},{name:"Bright blue",color:"#0063FF"},{name:"Deep blue",color:"#1F32C4"},{name:"Pale indigo",color:"#4C5897"},{name:"Purple",color:"#4F23C0"},{name:"Pale purple",color:"#504C97"},{name:"Violet",color:"#7B2EDA"},{name:"Pale violet",color:"#6B31B2"},{name:"Dark pink",color:"#8931B2"},{name:"Bright pink",color:"#C02ADF"},{name:"Pink",color:"#F018E8"},{name:"Magenta",color:"#F01879"},{name:"Bright red",color:"#F0185C"},{name:"Pale red",color:"#C91A52"},{name:"Deep red",color:"#C91A25"},{name:"Red",color:"#F21616"}];var Z=n(53016),$=n.n(Z);function A(e){let{value:t,onChange:n,displayColorsInfo:l,setDisplayColorsInfo:i}=e,[a,s]=(0,o.useState)(t),[c,u]=(0,o.useState)(!1),d=(0,p.useRouter)(),m=(0,P.V)(),h=e=>{d.replace({query:{...d.query,color:e.replace("#","")}},void 0,{scroll:!1})},f=e=>{s(e),n(e)},x=e=>{let t=e.currentTarget.value,r=!B().valid(t);s(t),u(r),r||n(t),r||h(t)},_=I.map(e=>(0,r.jsx)(T.z,{variant:"default",leftSection:(0,r.jsx)(g.b,{size:20,color:e.color}),radius:"md",onClick:()=>{f(e.color),h(e.color)},children:e.name},e.color));return(0,r.jsxs)("div",{className:$().root,children:[(0,r.jsxs)("div",{className:$().inputs,children:[(0,r.jsx)(L.o,{value:a,onChange:x,error:c,label:"Enter base color",className:$().input,size:"md",radius:"md"}),(0,r.jsx)(E.z,{value:t,onChange:f,onChangeEnd:h,size:"lg",classNames:{saturation:$().saturation,wrapper:$().colorPicker}}),(0,r.jsx)(S.r,{className:$().switch,label:"Display colors info",size:"md",checked:l,onChange:e=>i(e.currentTarget.checked),mt:"xl"}),(0,r.jsx)(T.z,{fullWidth:!0,leftSection:m.copied?(0,r.jsx)(z.Z,{style:{width:(0,M.h)(18)}}):(0,r.jsx)(O.Z,{style:{width:(0,M.h)(18)}}),rightSection:(0,r.jsx)("span",{}),justify:"space-between",size:"md",mt:"xl",radius:"md",onClick:()=>m.copy(window.location.href),children:m.copied?"Copied":"Copy URL"})]}),(0,r.jsxs)("div",{className:$().presets,children:[(0,r.jsx)(D.I.Label,{size:"md",children:"Preset"}),(0,r.jsx)(w.Z,{gap:"xs",children:_})]})]})}var R=n(66328),W=n(44311),G=n(54819);function H(e){let{colors:t}=e,[n]=(0,G.c)(t,100);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(D.I.Label,{display:"block",size:"md",labelElement:"div",mt:"xl",mb:"sm",children:"Variants preview"}),(0,r.jsx)(R.M,{theme:{colors:{"__colors-generator__":n}},children:(0,r.jsx)(W.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(W.i,{withTableBorder:!0,withColumnBorders:!0,children:[(0,r.jsx)(W.i.Thead,{children:(0,r.jsxs)(W.i.Tr,{children:[(0,r.jsx)(W.i.Th,{ta:"center",children:"Filled"}),(0,r.jsx)(W.i.Th,{ta:"center",children:"Light"}),(0,r.jsx)(W.i.Th,{ta:"center",children:"Outline"}),(0,r.jsx)(W.i.Th,{ta:"center",children:"Subtle"})]})}),(0,r.jsx)(W.i.Tbody,{children:(0,r.jsxs)(W.i.Tr,{children:[(0,r.jsx)(W.i.Td,{children:(0,r.jsx)(T.z,{color:"__colors-generator__",fullWidth:!0,children:"Button"})}),(0,r.jsx)(W.i.Td,{children:(0,r.jsx)(T.z,{color:"__colors-generator__",variant:"light",fullWidth:!0,children:"Button"})}),(0,r.jsx)(W.i.Td,{children:(0,r.jsx)(T.z,{color:"__colors-generator__",variant:"outline",fullWidth:!0,children:"Button"})}),(0,r.jsx)(W.i.Td,{children:(0,r.jsx)(T.z,{color:"__colors-generator__",variant:"subtle",fullWidth:!0,children:"Button"})})]})})]})})})]})}function V(e){let{colors:t}=e,n=JSON.stringify(t);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(D.I.Label,{size:"md",labelElement:"div",mt:"xl",children:"Colors array"}),(0,r.jsx)(b.yp,{language:"json",code:JSON.stringify(t,null,2)},"".concat(n,"-1")),(0,r.jsx)(D.I.Label,{size:"md",labelElement:"div",mt:"xl",children:"Usage with MantineProvider"}),(0,r.jsx)(b.yp,{language:"tsx",code:"import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';\n\nconst myColor: MantineColorsTuple = ".concat(JSON.stringify(t,null,2).replace(/"/g,"'"),";\n\nconst theme = createTheme({\n  colors: {\n    myColor,\n  }\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}")},n)]})}function J(){let e=(0,p.useRouter)(),t="#".concat(e.query.color),[n,l]=(0,o.useState)("#5474B4"),{colors:i,baseColorIndex:a}=function(e){let t=x()(e),n=function(e){let t=e.get("hsl.l");return _.reduce((e,n)=>Math.abs(n-t)<Math.abs(e-t)?n:e)}(t),r=_.findIndex(e=>e===n),o=_.map(e=>t.set("hsl.l",e)).map(e=>x()(e)).map((e,t)=>{let n=j[t]-j[r];return n>=0?e.saturate(n):e.desaturate(-1*n)});return{baseColorIndex:r,colors:o}}(n),[s,c]=(0,h._)({key:"display-colors-info",defaultValue:!0});return(0,o.useEffect)(()=>{/^#[0-9A-F]{6}$/i.test(t)&&l(t)},[e.query.color]),(0,r.jsxs)("div",{children:[(0,r.jsx)(b.an,{order:1,children:"Mantine colors generator"}),(0,r.jsx)(A,{value:n,onChange:l,displayColorsInfo:s,setDisplayColorsInfo:c}),(0,r.jsx)(N,{colors:i,baseColorIndex:a,displayColorsInfo:s}),(0,r.jsx)(H,{colors:i.map(e=>e.hex())}),(0,r.jsx)(V,{colors:i.map(e=>e.hex())})]})}function U(){return(0,r.jsx)(m,{title:"Colors generator",children:(0,r.jsx)(J,{})})}},53016:function(e){e.exports={root:"ColorsInput_root__y2k1o",colorPicker:"ColorsInput_colorPicker__3vaoK",saturation:"ColorsInput_saturation__pa4Mk",input:"ColorsInput_input__Blm7P",switch:"ColorsInput_switch___MnwZ"}},43066:function(e){e.exports={root:"ColorsList_root__ZzB5l",item:"ColorsList_item__RmNdL",swatch:"ColorsList_swatch__4rMEJ",label:"ColorsList_label__uy45Y",hex:"ColorsList_hex__4T0M_",index:"ColorsList_index__4xZTW"}},80165:function(e){e.exports={root:"Footer_root__bgmye",spacer:"Footer_spacer__g_thI",wrapper:"Footer_wrapper__chorF",inner:"Footer_inner__Oczlu",logoSection:"Footer_logoSection__VUxg4",description:"Footer_description__b7YOg",title:"Footer_title___pDUp",afterFooter:"Footer_afterFooter__FyXNP",afterFooterNote:"Footer_afterFooterNote__9yART",groups:"Footer_groups__nLTK6",social:"Footer_social__0m1yX",socialButton:"Footer_socialButton__zLzIx"}},16951:function(e){e.exports={wrapper:"LinksGroup_wrapper__54pi4",link:"LinksGroup_link__cg684",title:"LinksGroup_title__maicr"}},21616:function(e){e.exports={content:"PageBase_content__4g1iM"}},94185:function(e){e.exports={wrapper:"PageContentContainer_wrapper__H3HAY",container:"PageContentContainer_container__piKiS"}},46049:function(e,t,n){"use strict";n.d(t,{W:function(){return g}});var r=n(67294),o={root:"m-7485cace"},l=n(75144),i=n(35577),a=n(25637),s=n(51227),c=n(95553),u=n(71350),d=Object.defineProperty,m=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,f=(e,t,n)=>t in e?d(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,x=(e,t)=>{for(var n in t||(t={}))p.call(t,n)&&f(e,n,t[n]);if(m)for(var n of m(t))h.call(t,n)&&f(e,n,t[n]);return e},_=(e,t)=>{var n={};for(var r in e)p.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&m)for(var r of m(e))0>t.indexOf(r)&&h.call(e,r)&&(n[r]=e[r]);return n};let j={},b=(0,c.Z)((e,{size:t})=>({root:{"--container-size":(0,u.ap)(t,"container-size")}})),g=(0,l.d)((e,t)=>{let n=(0,i.w)("Container",j,e),{classNames:l,className:c,style:u,styles:d,unstyled:m,vars:p,fluid:h}=n,f=_(n,["classNames","className","style","styles","unstyled","vars","fluid"]),g=(0,a.y)({name:"Container",classes:o,props:n,className:c,style:u,classNames:l,styles:d,unstyled:m,vars:p,varsResolver:b});return r.createElement(s.x,x(x({ref:t,mod:{fluid:h}},g("root")),f))});g.classes=o,g.displayName="@mantine/core/Container"},61830:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(67294),o=n(46393),l=Object.defineProperty,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,c=(e,t,n)=>t in e?l(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,u=(e,t)=>{for(var n in t||(t={}))a.call(t,n)&&c(e,n,t[n]);if(i)for(var n of i(t))s.call(t,n)&&c(e,n,t[n]);return e},d=(e,t)=>{var n={};for(var r in e)a.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&i)for(var r of i(e))0>t.indexOf(r)&&s.call(e,r)&&(n[r]=e[r]);return n};function m(e){var{size:t,style:n}=e,l=d(e,["size","style"]);return r.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:u({width:(0,o.h)(t),height:(0,o.h)(t)},n)},l),r.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}},54819:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(67294);function o(e,t,n={leading:!1}){let[o,l]=(0,r.useState)(e),i=(0,r.useRef)(!1),a=(0,r.useRef)(null),s=(0,r.useRef)(!1),c=()=>window.clearTimeout(a.current);return(0,r.useEffect)(()=>{i.current&&(!s.current&&n.leading?(s.current=!0,l(e)):(c(),a.current=window.setTimeout(()=>{s.current=!1,l(e)},t)))},[e,n.leading,t]),(0,r.useEffect)(()=>(i.current=!0,c),[]),[o,c]}}},function(e){e.O(0,[1333,9774,2888,179],function(){return e(e.s=74241)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/colors-generator-7af0078c6aa3ab46.js b/_next/static/chunks/pages/colors-generator-7af0078c6aa3ab46.js
new file mode 100644
index 00000000000..517266b9799
--- /dev/null
+++ b/_next/static/chunks/pages/colors-generator-7af0078c6aa3ab46.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5318],{74241:function(e,r,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/colors-generator",function(){return t(77500)}])},8649:function(e,r,t){"use strict";t.d(r,{$:function(){return M}});var n=t(85893),o=t(67294),l=t(90512),i=t(51227),a=t(82827),s=t(46049),c=t(77048),u=t(74378),d=t(40624),m=t(55899),h=t(65623),p={socialButton:"m-fde4daed",socialButtonSection:"m-1df08738",discordButton:"m-6611c750",twitterButton:"m-a568e357"},f=t(95859),x=t(61830),_=Object.defineProperty,j=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,v=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,y=(e,r)=>{for(var t in r||(r={}))b.call(r,t)&&v(e,t,r[t]);if(j)for(var t of j(r))g.call(r,t)&&v(e,t,r[t]);return e},w=(e,r)=>{var t={};for(var n in e)b.call(e,n)&&0>r.indexOf(n)&&(t[n]=e[n]);if(null!=e&&j)for(var n of j(e))0>r.indexOf(n)&&g.call(e,n)&&(t[n]=e[n]);return t};function k(e){var{icon:r}=e,t=w(e,["icon"]);return o.createElement(m.z,y({component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:r,radius:"md",classNames:{root:p.socialButton,section:p.socialButtonSection}},t))}function C(e){var{className:r}=e,t=w(e,["className"]);return o.createElement(k,y({className:(0,d.Z)(p.discordButton,r),icon:o.createElement(f.D,{size:16}),href:h.$.discordLink},t),"Join Discord community")}function N(e){var{className:r}=e,t=w(e,["className"]);return o.createElement(k,y({className:(0,d.Z)(p.twitterButton,r),icon:o.createElement(x.Z,{size:16}),href:h.$.twitterLink},t),"Follow Mantine on Twitter")}var F=t(93258),B=t(41664),z=t.n(B),O=t(16951),P=t.n(O);function T(e){let{data:r,title:t}=e,o=r.map((e,r)=>(0,n.jsx)(c.x,{className:P().link,component:"next"===e.type?z():"a",href:e.link,children:e.label},r));return(0,n.jsxs)("div",{className:P().wrapper,children:[(0,n.jsx)(c.x,{className:P().title,children:t}),o]})}let L=[{title:"About",data:[{type:"next",label:"Contribute",link:"/contribute"},{type:"next",label:"About Mantine",link:"/about"},{type:"next",label:"Changelog",link:"/changelog/previous-versions"},{type:"link",label:"Releases",link:h.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:h.$.discordLink},{type:"link",label:"Follow on Twitter",link:h.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:h.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:h.$.uiLink},{type:"link",label:"Documentation",link:h.$.docsLink},{type:"link",label:"Github organization",link:h.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:h.$.npmLink}]}];var E=t(80165),S=t.n(E);function M(e){let{withNavbar:r}=e,t=L.map(e=>(0,n.jsx)(T,{data:e.data,title:e.title},e.title));return(0,n.jsxs)("div",{className:S().root,children:[(0,n.jsx)("div",{className:S().spacer}),(0,n.jsx)(i.x,{mod:{"with-navbar":r},className:(0,l.Z)(S().wrapper,a.Z.classNames.fullWidth),children:(0,n.jsxs)(s.W,{size:1100,children:[(0,n.jsxs)("div",{className:S().inner,children:[(0,n.jsxs)("div",{className:S().logoSection,children:[(0,n.jsx)(F.T,{}),(0,n.jsx)(c.x,{className:S().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,n.jsx)("div",{className:S().groups,children:t})]}),(0,n.jsx)("div",{className:S().afterFooter,children:(0,n.jsxs)(u.Z,{justify:"space-between",wrap:"wrap",children:[(0,n.jsxs)(c.x,{fz:"xs",className:S().afterFooterNote,children:["Built by ",(0,n.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,n.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,n.jsxs)("div",{className:S().social,children:[(0,n.jsx)(C,{className:S().socialButton}),(0,n.jsx)(N,{className:S().socialButton})]})]})})]})})]})}},31144:function(e,r,t){"use strict";t.d(r,{_:function(){return a}});var n=t(85893);t(67294);var o=t(8649),l=t(21616),i=t.n(l);function a(e){let{children:r}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:i().content,children:r}),(0,n.jsx)(o.$,{withNavbar:!0})]})}},77500:function(e,r,t){"use strict";t.r(r),t.d(r,{default:function(){return U}});var n=t(85893),o=t(67294),l=t(9008),i=t.n(l),a=t(31144),s=t(90512),c=t(94185),u=t.n(c);function d(e){let{className:r,children:t,...o}=e;return(0,n.jsx)("div",{className:(0,s.Z)(u().wrapper,r),...o,children:(0,n.jsx)("div",{className:u().container,children:t})})}function m(e){let{title:r,...t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i(),{children:(0,n.jsx)("title",{children:"".concat(r," | Mantine")})}),(0,n.jsx)(a._,{children:(0,n.jsx)(d,{...t})})]})}var h=t(11163),p=t(20761),f=t(8298),x=t.n(f);let _=[.96,.907,.805,.697,.605,.547,.518,.445,.395,.34],j=[.32,.16,.08,.04,0,0,.04,.08,.16,.32];var b=t(95443),g=t(87578),v=t(27499);function y(e){let r=e/255;return r<=.03928?r/12.92:((r+.055)/1.055)**2.4}var w=t(74378),k=t(43066),C=t.n(k);function N(e){let{colors:r,baseColorIndex:t,displayColorsInfo:o}=e,l=r.map((e,r)=>(0,n.jsx)("div",{className:C().item,children:(0,n.jsx)(g.b,{color:e.hex(),radius:0,className:C().swatch,withShadow:!1,"data-base":r===t||void 0,c:!function(e,r=.179){return function(e){let r=y(e.r),t=y(e.g),n=y(e.b);return .2126*r+.7152*t+.0722*n}((0,v.c)(e))>r}(e.hex())?"white":"black",children:o&&(0,n.jsxs)("div",{className:C().label,children:[(0,n.jsx)("span",{className:C().index,children:r}),(0,n.jsx)("span",{className:C().hex,children:e.hex()})]})})},r));return(0,n.jsx)(w.Z,{gap:0,wrap:"nowrap",className:C().root,children:l})}var F=t(28670),B=t.n(F),z=t(88198),O=t(93625),P=t(9410),T=t(55899),L=t(31577),E=t(91377),S=t(4741),M=t(46393),D=t(68267);let I=[{name:"Blue gray",color:"#63687C"},{name:"Brown",color:"#5D4037"},{name:"Tomato",color:"#F06418"},{name:"Deep orange",color:"#fc8a08"},{name:"Bright orange",color:"#FFA903"},{name:"Yellow",color:"#D9D02F"},{name:"Bright green",color:"#6BD731"},{name:"Green",color:"#2BDD66"},{name:"Light blue",color:"#00B5FF"},{name:"Sky blue",color:"#099CFF"},{name:"Pale blue",color:"#5474B4"},{name:"Bright blue",color:"#0063FF"},{name:"Deep blue",color:"#1F32C4"},{name:"Pale indigo",color:"#4C5897"},{name:"Purple",color:"#4F23C0"},{name:"Pale purple",color:"#504C97"},{name:"Violet",color:"#7B2EDA"},{name:"Pale violet",color:"#6B31B2"},{name:"Dark pink",color:"#8931B2"},{name:"Bright pink",color:"#C02ADF"},{name:"Pink",color:"#F018E8"},{name:"Magenta",color:"#F01879"},{name:"Bright red",color:"#F0185C"},{name:"Pale red",color:"#C91A52"},{name:"Deep red",color:"#C91A25"},{name:"Red",color:"#F21616"}];var Z=t(53016),$=t.n(Z);function A(e){let{value:r,onChange:t,displayColorsInfo:l,setDisplayColorsInfo:i}=e,[a,s]=(0,o.useState)(r),[c,u]=(0,o.useState)(!1),d=(0,h.useRouter)(),m=(0,P.V)(),p=e=>{d.replace({query:{...d.query,color:e.replace("#","")}},void 0,{scroll:!1})},f=e=>{s(e),t(e)},x=e=>{let r=e.currentTarget.value,n=!B().valid(r);s(r),u(n),n||t(r),n||p(r)},_=I.map(e=>(0,n.jsx)(T.z,{variant:"default",leftSection:(0,n.jsx)(g.b,{size:20,color:e.color}),radius:"md",onClick:()=>{f(e.color),p(e.color)},children:e.name},e.color));return(0,n.jsxs)("div",{className:$().root,children:[(0,n.jsxs)("div",{className:$().inputs,children:[(0,n.jsx)(L.o,{value:a,onChange:x,error:c,label:"Enter base color",className:$().input,size:"md",radius:"md"}),(0,n.jsx)(E.z,{value:r,onChange:f,onChangeEnd:p,size:"lg",classNames:{saturation:$().saturation,wrapper:$().colorPicker}}),(0,n.jsx)(S.r,{className:$().switch,label:"Display colors info",size:"md",checked:l,onChange:e=>i(e.currentTarget.checked),mt:"xl"}),(0,n.jsx)(T.z,{fullWidth:!0,leftSection:m.copied?(0,n.jsx)(z.Z,{style:{width:(0,M.h)(18)}}):(0,n.jsx)(O.Z,{style:{width:(0,M.h)(18)}}),rightSection:(0,n.jsx)("span",{}),justify:"space-between",size:"md",mt:"xl",radius:"md",onClick:()=>m.copy(window.location.href),children:m.copied?"Copied":"Copy URL"})]}),(0,n.jsxs)("div",{className:$().presets,children:[(0,n.jsx)(D.I.Label,{size:"md",children:"Preset"}),(0,n.jsx)(w.Z,{gap:"xs",children:_})]})]})}var R=t(66328),W=t(44311),G=t(54819);function H(e){let{colors:r}=e,[t]=(0,G.c)(r,100);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(D.I.Label,{display:"block",size:"md",labelElement:"div",mt:"xl",mb:"sm",children:"Variants preview"}),(0,n.jsx)(R.M,{theme:{colors:{"__colors-generator__":t}},children:(0,n.jsx)(W.i.ScrollContainer,{minWidth:600,children:(0,n.jsxs)(W.i,{withTableBorder:!0,withColumnBorders:!0,children:[(0,n.jsx)(W.i.Thead,{children:(0,n.jsxs)(W.i.Tr,{children:[(0,n.jsx)(W.i.Th,{ta:"center",children:"Filled"}),(0,n.jsx)(W.i.Th,{ta:"center",children:"Light"}),(0,n.jsx)(W.i.Th,{ta:"center",children:"Outline"}),(0,n.jsx)(W.i.Th,{ta:"center",children:"Subtle"})]})}),(0,n.jsx)(W.i.Tbody,{children:(0,n.jsxs)(W.i.Tr,{children:[(0,n.jsx)(W.i.Td,{children:(0,n.jsx)(T.z,{color:"__colors-generator__",fullWidth:!0,children:"Button"})}),(0,n.jsx)(W.i.Td,{children:(0,n.jsx)(T.z,{color:"__colors-generator__",variant:"light",fullWidth:!0,children:"Button"})}),(0,n.jsx)(W.i.Td,{children:(0,n.jsx)(T.z,{color:"__colors-generator__",variant:"outline",fullWidth:!0,children:"Button"})}),(0,n.jsx)(W.i.Td,{children:(0,n.jsx)(T.z,{color:"__colors-generator__",variant:"subtle",fullWidth:!0,children:"Button"})})]})})]})})})]})}function V(e){let{colors:r}=e,t=JSON.stringify(r);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(D.I.Label,{size:"md",labelElement:"div",mt:"xl",children:"Colors array"}),(0,n.jsx)(b.yp,{language:"json",code:JSON.stringify(r,null,2)},"".concat(t,"-1")),(0,n.jsx)(D.I.Label,{size:"md",labelElement:"div",mt:"xl",children:"Usage with MantineProvider"}),(0,n.jsx)(b.yp,{language:"tsx",code:"import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';\n\nconst myColor: MantineColorsTuple = ".concat(JSON.stringify(r,null,2).replace(/"/g,"'"),";\n\nconst theme = createTheme({\n  colors: {\n    myColor,\n  }\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}")},t)]})}function J(){let e=(0,h.useRouter)(),r="#".concat(e.query.color),[t,l]=(0,o.useState)("#5474B4"),{colors:i,baseColorIndex:a}=function(e){let r=x()(e),t=function(e){let r=e.get("hsl.l");return _.reduce((e,t)=>Math.abs(t-r)<Math.abs(e-r)?t:e)}(r),n=_.findIndex(e=>e===t),o=_.map(e=>r.set("hsl.l",e)).map(e=>x()(e)).map((e,r)=>{let t=j[r]-j[n];return t>=0?e.saturate(t):e.desaturate(-1*t)});return{baseColorIndex:n,colors:o}}(t),[s,c]=(0,p._)({key:"display-colors-info",defaultValue:!0});return(0,o.useEffect)(()=>{/^#[0-9A-F]{6}$/i.test(r)&&l(r)},[e.query.color]),(0,n.jsxs)("div",{children:[(0,n.jsx)(b.an,{order:1,children:"Mantine colors generator"}),(0,n.jsx)(A,{value:t,onChange:l,displayColorsInfo:s,setDisplayColorsInfo:c}),(0,n.jsx)(N,{colors:i,baseColorIndex:a,displayColorsInfo:s}),(0,n.jsx)(H,{colors:i.map(e=>e.hex())}),(0,n.jsx)(V,{colors:i.map(e=>e.hex())})]})}function U(){return(0,n.jsx)(m,{title:"Colors generator",children:(0,n.jsx)(J,{})})}},53016:function(e){e.exports={root:"ColorsInput_root__y2k1o",colorPicker:"ColorsInput_colorPicker__3vaoK",saturation:"ColorsInput_saturation__pa4Mk",input:"ColorsInput_input__Blm7P",switch:"ColorsInput_switch___MnwZ"}},43066:function(e){e.exports={root:"ColorsList_root__ZzB5l",item:"ColorsList_item__RmNdL",swatch:"ColorsList_swatch__4rMEJ",label:"ColorsList_label__uy45Y",hex:"ColorsList_hex__4T0M_",index:"ColorsList_index__4xZTW"}},80165:function(e){e.exports={root:"Footer_root__bgmye",spacer:"Footer_spacer__g_thI",wrapper:"Footer_wrapper__chorF",inner:"Footer_inner__Oczlu",logoSection:"Footer_logoSection__VUxg4",description:"Footer_description__b7YOg",title:"Footer_title___pDUp",afterFooter:"Footer_afterFooter__FyXNP",afterFooterNote:"Footer_afterFooterNote__9yART",groups:"Footer_groups__nLTK6",social:"Footer_social__0m1yX",socialButton:"Footer_socialButton__zLzIx"}},16951:function(e){e.exports={wrapper:"LinksGroup_wrapper__54pi4",link:"LinksGroup_link__cg684",title:"LinksGroup_title__maicr"}},21616:function(e){e.exports={content:"PageBase_content__4g1iM"}},94185:function(e){e.exports={wrapper:"PageContentContainer_wrapper__H3HAY",container:"PageContentContainer_container__piKiS"}},46049:function(e,r,t){"use strict";t.d(r,{W:function(){return g}});var n=t(67294),o={root:"m-7485cace"},l=t(75144),i=t(35577),a=t(25637),s=t(51227),c=t(95553),u=t(71350),d=Object.defineProperty,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,f=(e,r,t)=>r in e?d(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,x=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&f(e,t,r[t]);if(m)for(var t of m(r))p.call(r,t)&&f(e,t,r[t]);return e},_=(e,r)=>{var t={};for(var n in e)h.call(e,n)&&0>r.indexOf(n)&&(t[n]=e[n]);if(null!=e&&m)for(var n of m(e))0>r.indexOf(n)&&p.call(e,n)&&(t[n]=e[n]);return t};let j={},b=(0,c.Z)((e,{size:r})=>({root:{"--container-size":(0,u.ap)(r,"container-size")}})),g=(0,l.d)((e,r)=>{let t=(0,i.w)("Container",j,e),{classNames:l,className:c,style:u,styles:d,unstyled:m,vars:h,fluid:p}=t,f=_(t,["classNames","className","style","styles","unstyled","vars","fluid"]),g=(0,a.y)({name:"Container",classes:o,props:t,className:c,style:u,classNames:l,styles:d,unstyled:m,vars:h,varsResolver:b});return n.createElement(s.x,x(x({ref:r,mod:{fluid:p}},g("root")),f))});g.classes=o,g.displayName="@mantine/core/Container"},61830:function(e,r,t){"use strict";t.d(r,{Z:function(){return m}});var n=t(67294),o=t(46393),l=Object.defineProperty,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,c=(e,r,t)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))a.call(r,t)&&c(e,t,r[t]);if(i)for(var t of i(r))s.call(r,t)&&c(e,t,r[t]);return e},d=(e,r)=>{var t={};for(var n in e)a.call(e,n)&&0>r.indexOf(n)&&(t[n]=e[n]);if(null!=e&&i)for(var n of i(e))0>r.indexOf(n)&&s.call(e,n)&&(t[n]=e[n]);return t};function m(e){var{size:r,style:t}=e,l=d(e,["size","style"]);return n.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:u({width:(0,o.h)(r),height:(0,o.h)(r)},t)},l),n.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}},54819:function(e,r,t){"use strict";t.d(r,{c:function(){return o}});var n=t(67294);function o(e,r,t={leading:!1}){let[o,l]=(0,n.useState)(e),i=(0,n.useRef)(!1),a=(0,n.useRef)(null),s=(0,n.useRef)(!1),c=()=>window.clearTimeout(a.current);return(0,n.useEffect)(()=>{i.current&&(!s.current&&t.leading?(s.current=!0,l(e)):(c(),a.current=window.setTimeout(()=>{s.current=!1,l(e)},r)))},[e,t.leading,r]),(0,n.useEffect)(()=>(i.current=!0,c),[]),[o,c]}}},function(e){e.O(0,[1333,9774,2888,179],function(){return e(e.s=74241)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/theming/default-props-ca4da7cae68f8fdb.js b/_next/static/chunks/pages/theming/default-props-435f082c9754bd64.js
similarity index 62%
rename from _next/static/chunks/pages/theming/default-props-ca4da7cae68f8fdb.js
rename to _next/static/chunks/pages/theming/default-props-435f082c9754bd64.js
index 4e583bee653..38ebc0a6585 100644
--- a/_next/static/chunks/pages/theming/default-props-ca4da7cae68f8fdb.js
+++ b/_next/static/chunks/pages/theming/default-props-435f082c9754bd64.js
@@ -63,4 +63,4 @@ function Demo() {
     </div>
   );
 }
-`,M={color:"red"};function g(e){let{color:n,children:t}=(0,f.w)("CustomComponent",M,e);return a.createElement("div",{style:{color:n}},t)}let y=(0,i.j)({components:{CustomComponent:{defaultProps:{color:"green"}}}}),P={type:"code",component:function(){return a.createElement("div",null,a.createElement(g,null,"Default color"),a.createElement(l.M2,{theme:y},a.createElement(g,null,"Provider color"),a.createElement(g,{color:"blue"},"Prop color")))},code:v},x=(0,s.A)(c.us.DefaultProps);function j(e){let n=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",a:"a",pre:"pre",ul:"ul",li:"li"},(0,r.ah)(),e.components),{Demo:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"default-props",children:"Default props"}),"\n",(0,o.jsxs)(n.p,{children:["You can define default props for every Mantine component by setting ",(0,o.jsx)(n.code,{children:"theme.components"}),".\nThese props will be used by default by all components of your application unless they are overridden by component props:"]}),"\n",(0,o.jsx)(t,{data:m}),"\n",(0,o.jsx)(n.h2,{id:"default-props-with-mantinethemeprovider",children:"Default props with MantineThemeProvider"}),"\n",(0,o.jsxs)(n.p,{children:["You can also use ",(0,o.jsx)(n.a,{href:"/theming/mantine-provider#mantinethemeprovider",children:"MantineThemeProvider"})," to define default props\nfor a part of your application:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import { MantineThemeProvider, Button, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  components: {\n    Button: Button.extend({\n      defaultProps: {\n        color: 'cyan',\n        variant: 'outline',\n      },\n    }),\n  },\n});\n\nfunction Demo() {\n  return (\n    <>\n      <MantineThemeProvider theme={theme}>\n        <AppPart />\n      </MantineThemeProvider>\n\n      <AnotherAppPart />\n    </>\n  );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"default-props-for-compound-components",children:"Default props for compound components"}),"\n",(0,o.jsxs)(n.p,{children:["Some components like ",(0,o.jsx)(n.a,{href:"/core/menu/",children:"Menu"})," and ",(0,o.jsx)(n.a,{href:"/core/tabs/",children:"Tabs"})," have associated compound components:\n",(0,o.jsx)(n.code,{children:"Menu.Item"}),", ",(0,o.jsx)(n.code,{children:"Tabs.List"}),", etc.. You can add default props to these components by omitting the dot from component name:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, Menu, Tabs } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider\n      theme={{\n        components: {\n          MenuItem: Menu.Item.extend({\n            defaultProps: { color: 'red' },\n          }),\n\n          TabsList: Tabs.List.extend({\n            defaultProps: {\n              justify: 'center',\n            },\n          }),\n        },\n      }}\n    >\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"useprops-hook",children:"useProps hook"}),"\n",(0,o.jsxs)(n.p,{children:["You can use ",(0,o.jsx)(n.code,{children:"useProps"})," hook to add default props support to any custom component.\n",(0,o.jsx)(n.code,{children:"useProps"})," accepts three arguments:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"component name (string) – it is used to connect component with theme"}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"defaultProps"})," – default props on component level – these props are used when default props are not defined on theme"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"props"})," – props passed to component"]}),"\n"]}),"\n",(0,o.jsx)(t,{data:P})]})}var k=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,o.jsx)(x,Object.assign({},e,{children:(0,o.jsx)(j,e)}))}}},function(e){e.O(0,[1300,178,9774,2888,179],function(){return e(e.s=69575)}),_N_E=e.O()}]);
\ No newline at end of file
+`,M={color:"red"};function y(e){let{color:n,children:t}=(0,f.w)("CustomComponent",M,e);return a.createElement("div",{style:{color:n}},t)}let g=(0,i.j)({components:{CustomComponent:{defaultProps:{color:"green"}}}}),P={type:"code",component:function(){return a.createElement("div",null,a.createElement(y,null,"Default color"),a.createElement(l.M2,{theme:g},a.createElement(y,null,"Provider color"),a.createElement(y,{color:"blue"},"Prop color")))},code:v},x=(0,s.A)(c.us.DefaultProps);function j(e){let n=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre",a:"a",ul:"ul",li:"li"},(0,r.ah)(),e.components),{Demo:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"default-props",children:"Default props"}),"\n",(0,o.jsxs)(n.p,{children:["You can define default props for every Mantine component by setting ",(0,o.jsx)(n.code,{children:"theme.components"}),".\nThese props will be used by default by all components of your application unless they are overridden by component props:"]}),"\n",(0,o.jsx)(t,{data:m}),"\n",(0,o.jsx)(n.h2,{id:"default-props-with-mantinethemeprovider",children:"Default props with MantineThemeProvider"}),"\n",(0,o.jsxs)(n.p,{children:["You can also use ",(0,o.jsx)(n.code,{children:"MantineThemeProvider"})," to define default props\nfor a part of your application:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import { MantineThemeProvider, Button, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  components: {\n    Button: Button.extend({\n      defaultProps: {\n        color: 'cyan',\n        variant: 'outline',\n      },\n    }),\n  },\n});\n\nfunction Demo() {\n  return (\n    <>\n      <MantineThemeProvider theme={theme}>\n        <AppPart />\n      </MantineThemeProvider>\n\n      <AnotherAppPart />\n    </>\n  );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"default-props-for-compound-components",children:"Default props for compound components"}),"\n",(0,o.jsxs)(n.p,{children:["Some components like ",(0,o.jsx)(n.a,{href:"/core/menu/",children:"Menu"})," and ",(0,o.jsx)(n.a,{href:"/core/tabs/",children:"Tabs"})," have associated compound components:\n",(0,o.jsx)(n.code,{children:"Menu.Item"}),", ",(0,o.jsx)(n.code,{children:"Tabs.List"}),", etc.. You can add default props to these components by omitting the dot from component name:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, Menu, Tabs } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider\n      theme={{\n        components: {\n          MenuItem: Menu.Item.extend({\n            defaultProps: { color: 'red' },\n          }),\n\n          TabsList: Tabs.List.extend({\n            defaultProps: {\n              justify: 'center',\n            },\n          }),\n        },\n      }}\n    >\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"useprops-hook",children:"useProps hook"}),"\n",(0,o.jsxs)(n.p,{children:["You can use ",(0,o.jsx)(n.code,{children:"useProps"})," hook to add default props support to any custom component.\n",(0,o.jsx)(n.code,{children:"useProps"})," accepts three arguments:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"component name (string) – it is used to connect component with theme"}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"defaultProps"})," – default props on component level – these props are used when default props are not defined on theme"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"props"})," – props passed to component"]}),"\n"]}),"\n",(0,o.jsx)(t,{data:P})]})}var k=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,o.jsx)(x,Object.assign({},e,{children:(0,o.jsx)(j,e)}))}}},function(e){e.O(0,[1300,178,9774,2888,179],function(){return e(e.s=69575)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js b/_next/static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js
new file mode 100644
index 00000000000..fe4aba25da4
--- /dev/null
+++ b/_next/static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6708],{33507:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("arrow-left","IconArrowLeft",[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M5 12l6 6",key:"svg-1"}],["path",{d:"M5 12l6 -6",key:"svg-2"}]])},12162:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("arrow-right","IconArrowRight",[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M13 18l6 -6",key:"svg-1"}],["path",{d:"M13 6l6 6",key:"svg-2"}]])},8427:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("calendar","IconCalendar",[["path",{d:"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z",key:"svg-0"}],["path",{d:"M16 3v4",key:"svg-1"}],["path",{d:"M8 3v4",key:"svg-2"}],["path",{d:"M4 11h16",key:"svg-3"}],["path",{d:"M11 15h1",key:"svg-4"}],["path",{d:"M12 15v3",key:"svg-5"}]])},38767:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("license","IconLicense",[["path",{d:"M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11",key:"svg-0"}],["path",{d:"M9 7l4 0",key:"svg-1"}],["path",{d:"M9 11l4 0",key:"svg-2"}]])},94342:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("list","IconList",[["path",{d:"M9 6l11 0",key:"svg-0"}],["path",{d:"M9 12l11 0",key:"svg-1"}],["path",{d:"M9 18l11 0",key:"svg-2"}],["path",{d:"M5 6l0 .01",key:"svg-3"}],["path",{d:"M5 12l0 .01",key:"svg-4"}],["path",{d:"M5 18l0 .01",key:"svg-5"}]])},30471:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("pencil","IconPencil",[["path",{d:"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4",key:"svg-0"}],["path",{d:"M13.5 6.5l4 4",key:"svg-1"}]])},62640:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("switch-2","IconSwitch2",[["path",{d:"M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6",key:"svg-0"}],["path",{d:"M18 4l3 3l-3 3",key:"svg-1"}],["path",{d:"M3 7h5l7 10h6",key:"svg-2"}],["path",{d:"M18 20l3 -3l-3 -3",key:"svg-3"}]])},94629:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/theming/mantine-provider",function(){return r(26549)}])},26549:function(e,n,r){"use strict";r.r(n);var t=r(85893),s=r(11151),a=r(19905),o=r(9904);let i=(0,a.A)(o.us.MantineProvider);function c(e){let n=Object.assign({h1:"h1",p:"p",code:"code",a:"a",h2:"h2",pre:"pre",h3:"h3",strong:"strong",ul:"ul",li:"li"},(0,s.ah)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"mantineprovider",children:"MantineProvider"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineProvider"})," provides ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"})," context value, manages color scheme\nchanges and injects ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables"}),". It must be rendered at the root of your\napplication and should be user only once."]}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  /** Your theme override here */\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"mantineprovider-props",children:"MantineProvider props"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineProvider"})," supports the following props:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** CSS selector to which CSS variables should be added, `:root` by default */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */\n  withCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?(): HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `<style />` tags */\n  getStyleNonce?(): string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Your application */\n  children?: React.ReactNode;\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"theme",children:"theme"}),"\n",(0,t.jsxs)(n.p,{children:["Pass ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"})," override to ",(0,t.jsx)(n.code,{children:"theme"})," prop. It will be merged with the default\ntheme and used in all components."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  fontFamily: 'Open Sans, sans-serif',\n  primaryColor: 'cyan',\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"colorschememanager",children:"colorSchemeManager"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"colorSchemeManager"})," is used to retrieve and set color scheme value in external storage. By default,\n",(0,t.jsx)(n.code,{children:"MantineProvider"})," uses ",(0,t.jsx)(n.code,{children:"window.localStorage"})," to store color scheme value, but you can pass your own\nimplementation to ",(0,t.jsx)(n.code,{children:"colorSchemeManager"})," prop. You can learn more about color scheme management in the\n",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, localStorageColorSchemeManager } from '@mantine/core';\n\nconst colorSchemeManager = localStorageColorSchemeManager({ key: 'my-app-color-scheme' });\n\nfunction Demo() {\n  return (\n    <MantineProvider colorSchemeManager={colorSchemeManager}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"defaultcolorscheme",children:"defaultColorScheme"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"defaultColorScheme"})," value is used when ",(0,t.jsx)(n.code,{children:"colorSchemeManager"})," cannot retrieve the value from external\nstorage, for example during server side rendering or when the user hasn't selected a preferred color scheme.\nPossible values are ",(0,t.jsx)(n.code,{children:"light"}),", ",(0,t.jsx)(n.code,{children:"dark"})," and ",(0,t.jsx)(n.code,{children:"auto"}),". By default, it is set to ",(0,t.jsx)(n.code,{children:"auto"}),",\nwhich means that the color scheme will be determined based on user system preferences.\nYou can learn more about color scheme management in the ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider defaultColorScheme=\"dark\">\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"cssvariablesselector",children:"cssVariablesSelector"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"cssVariablesSelector"})," is a CSS selector to which ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables"})," should be added.\nBy default, it is ",(0,t.jsx)(n.code,{children:":root"}),". ",(0,t.jsx)(n.code,{children:"MantineProvider"})," generates CSS variables based on given ",(0,t.jsx)(n.a,{href:"/theming/theme-object/",children:"theme override"}),"\nand ",(0,t.jsx)(n.code,{children:"cssVariablesResolver"}),", then these variables are rendered into ",(0,t.jsx)(n.code,{children:"<style />"})," tag next to your application.\nYou can learn more about Mantine CSS variables in the ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider cssVariablesSelector=\"html\">\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"withcssvariables",children:"withCssVariables"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"withCssVariables"})," determines whether theme CSS variables should be added to given ",(0,t.jsx)(n.code,{children:"cssVariablesSelector"}),".\nBy default, it is set to ",(0,t.jsx)(n.code,{children:"true"}),", you should not change it unless you want to manage CSS variables\nvia ",(0,t.jsx)(n.code,{children:".css"})," file (Note that in this case you will need to generate all theme tokens\nthat are not a part of the default theme on your side)."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider withCssVariables={false}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"getrootelement",children:"getRootElement"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"getRootElement"})," is a function that returns the root application (usually ",(0,t.jsx)(n.code,{children:"html"}),") element to set ",(0,t.jsx)(n.code,{children:"data-mantine-color-scheme"})," attribute.\nDefault value is ",(0,t.jsx)(n.code,{children:"() => document.documentElement"})," which means that ",(0,t.jsx)(n.code,{children:"data-mantine-color-scheme"}),"\nattribute will be added to ",(0,t.jsx)(n.code,{children:"<html />"})," tag. You can learn more about color scheme management in the\n",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nconst getRootElement = () => (typeof window === 'undefined' ? undefined : document.body);\n\nfunction Demo() {\n  return (\n    <MantineProvider getRootElement={getRootElement}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"classnamesprefix",children:"classNamesPrefix"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"classNamesPrefix"})," is a prefix for components static classes (for example ",(0,t.jsx)(n.code,{children:"{selector}-Text-root"}),").\nDefault value is ",(0,t.jsx)(n.code,{children:"mantine"})," – all components will have ",(0,t.jsx)(n.code,{children:"mantine-"})," prefix in their ",(0,t.jsx)(n.strong,{children:"static classes"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Text, MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider>\n      <Text>Just some text</Text>\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In this case (default ",(0,t.jsx)(n.code,{children:"classNamesPrefix"}),"), ",(0,t.jsx)(n.a,{href:"/core/text",children:"Text"})," component will have the following classes:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-focus-auto"})," – global utility class"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"m-3nrA4eL"})," – component class, usually a random string, with this class library styles are applied"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-Text-root"})," – component static class, part of ",(0,t.jsx)(n.a,{href:"/styles/styles-api",children:"Styles API"})]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["With ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," you can change only ",(0,t.jsx)(n.strong,{children:"static class"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Text, MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider classNamesPrefix=\"app\">\n      <Text>Just some text</Text>\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now ",(0,t.jsx)(n.a,{href:"/core/text",children:"Text"})," component will have the following classes:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-focus-auto"})," – ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," does not impact global utility classes – it is static and ",(0,t.jsx)(n.strong,{children:"cannot be changed"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"m-3nrA4eL"})," – ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," does not impact library class – it is static and ",(0,t.jsx)(n.strong,{children:"cannot be changed"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"app-Text-root"})," – component static class has ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," instead of ",(0,t.jsx)(n.code,{children:"mantine"})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"getstylenonce",children:"getStyleNonce"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"getStyleNonce"})," is a function to generate ",(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce",children:"nonce"})," attribute added to dynamic generated ",(0,t.jsx)(n.code,{children:"<style />"})," tags."]}),"\n",(0,t.jsx)(n.h3,{id:"cssvariablesresolver",children:"cssVariablesResolver"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"cssVariablesResolver"})," is a function to generate CSS variables styles based on the ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"}),".\nYou can learn more about Mantine CSS variables in the ",(0,t.jsx)(n.a,{href:"/styles/css-variables#css-variables-resolver",children:"CSS variables guide"}),"."]})]})}n.default=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(i,Object.assign({},e,{children:(0,t.jsx)(c,e)}))}}},function(e){e.O(0,[1300,178,9774,2888,179],function(){return e(e.s=94629)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js b/_next/static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js
deleted file mode 100644
index fd287943a91..00000000000
--- a/_next/static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js
+++ /dev/null
@@ -1,17 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6708],{33507:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("arrow-left","IconArrowLeft",[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M5 12l6 6",key:"svg-1"}],["path",{d:"M5 12l6 -6",key:"svg-2"}]])},12162:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("arrow-right","IconArrowRight",[["path",{d:"M5 12l14 0",key:"svg-0"}],["path",{d:"M13 18l6 -6",key:"svg-1"}],["path",{d:"M13 6l6 6",key:"svg-2"}]])},8427:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("calendar","IconCalendar",[["path",{d:"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z",key:"svg-0"}],["path",{d:"M16 3v4",key:"svg-1"}],["path",{d:"M8 3v4",key:"svg-2"}],["path",{d:"M4 11h16",key:"svg-3"}],["path",{d:"M11 15h1",key:"svg-4"}],["path",{d:"M12 15v3",key:"svg-5"}]])},38767:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("license","IconLicense",[["path",{d:"M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11",key:"svg-0"}],["path",{d:"M9 7l4 0",key:"svg-1"}],["path",{d:"M9 11l4 0",key:"svg-2"}]])},94342:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("list","IconList",[["path",{d:"M9 6l11 0",key:"svg-0"}],["path",{d:"M9 12l11 0",key:"svg-1"}],["path",{d:"M9 18l11 0",key:"svg-2"}],["path",{d:"M5 6l0 .01",key:"svg-3"}],["path",{d:"M5 12l0 .01",key:"svg-4"}],["path",{d:"M5 18l0 .01",key:"svg-5"}]])},30471:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("pencil","IconPencil",[["path",{d:"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4",key:"svg-0"}],["path",{d:"M13.5 6.5l4 4",key:"svg-1"}]])},62640:function(e,n,r){"use strict";r.d(n,{Z:function(){return t}});var t=(0,r(30853).Z)("switch-2","IconSwitch2",[["path",{d:"M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6",key:"svg-0"}],["path",{d:"M18 4l3 3l-3 3",key:"svg-1"}],["path",{d:"M3 7h5l7 10h6",key:"svg-2"}],["path",{d:"M18 20l3 -3l-3 -3",key:"svg-3"}]])},94629:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/theming/mantine-provider",function(){return r(89341)}])},89341:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return v}});var t=r(85893),s=r(11151),o=r(19905),i=r(9904),a=r(67294),c=r(49441),l=r(74378),d=r(55899);let h=`
-import { MantineThemeProvider, Button, Group } from '@mantine/core';
-
-function Demo() {
-  return (
-    <MantineThemeProvider>
-      <Group>
-        <Button>Default button</Button>
-
-        <MantineThemeProvider theme={{ primaryColor: 'red' }}>
-          <Button>Inside MantineThemeProvider</Button>
-        </MantineThemeProvider>
-      </Group>
-    </MantineThemeProvider>
-  );
-}
-`,m={type:"code",component:function(){return a.createElement(c.M2,null,a.createElement(l.Z,null,a.createElement(d.z,null,"Default button"),a.createElement(c.M2,{theme:{primaryColor:"red"}},a.createElement(d.z,null,"Inside MantineThemeProvider"))))},centered:!0,code:h},u=(0,o.A)(i.us.MantineProvider);function x(e){let n=Object.assign({h1:"h1",p:"p",code:"code",a:"a",h2:"h2",pre:"pre",h3:"h3",strong:"strong",ul:"ul",li:"li",blockquote:"blockquote"},(0,s.ah)(),e.components),{Demo:r}=n;return r||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"mantineprovider",children:"MantineProvider"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineProvider"})," provides ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"})," context value, manages color scheme\nchanges and injects ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables"}),". It must be rendered at the root of your\napplication and should be user only once."]}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  /** Your theme override here */\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"mantineprovider-props",children:"MantineProvider props"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineProvider"})," supports the following props:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** CSS selector to which CSS variables should be added, `:root` by default */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */\n  withCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?(): HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `<style />` tags */\n  getStyleNonce?(): string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Your application */\n  children?: React.ReactNode;\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"theme",children:"theme"}),"\n",(0,t.jsxs)(n.p,{children:["Pass ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"})," override to ",(0,t.jsx)(n.code,{children:"theme"})," prop. It will be merged with the default\ntheme and used in all components."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  fontFamily: 'Open Sans, sans-serif',\n  primaryColor: 'cyan',\n});\n\nfunction Demo() {\n  return (\n    <MantineProvider theme={theme}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"colorschememanager",children:"colorSchemeManager"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"colorSchemeManager"})," is used to retrieve and set color scheme value in external storage. By default,\n",(0,t.jsx)(n.code,{children:"MantineProvider"})," uses ",(0,t.jsx)(n.code,{children:"window.localStorage"})," to store color scheme value, but you can pass your own\nimplementation to ",(0,t.jsx)(n.code,{children:"colorSchemeManager"})," prop. You can learn more about color scheme management in the\n",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider, localStorageColorSchemeManager } from '@mantine/core';\n\nconst colorSchemeManager = localStorageColorSchemeManager({ key: 'my-app-color-scheme' });\n\nfunction Demo() {\n  return (\n    <MantineProvider colorSchemeManager={colorSchemeManager}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"defaultcolorscheme",children:"defaultColorScheme"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"defaultColorScheme"})," value is used when ",(0,t.jsx)(n.code,{children:"colorSchemeManager"})," cannot retrieve the value from external\nstorage, for example during server side rendering or when the user hasn't selected a preferred color scheme.\nPossible values are ",(0,t.jsx)(n.code,{children:"light"}),", ",(0,t.jsx)(n.code,{children:"dark"})," and ",(0,t.jsx)(n.code,{children:"auto"}),". By default, it is set to ",(0,t.jsx)(n.code,{children:"auto"}),",\nwhich means that the color scheme will be determined based on user system preferences.\nYou can learn more about color scheme management in the ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider defaultColorScheme=\"dark\">\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"cssvariablesselector",children:"cssVariablesSelector"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"cssVariablesSelector"})," is a CSS selector to which ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables"})," should be added.\nBy default, it is ",(0,t.jsx)(n.code,{children:":root"}),". ",(0,t.jsx)(n.code,{children:"MantineProvider"})," generates CSS variables based on given ",(0,t.jsx)(n.a,{href:"/theming/theme-object/",children:"theme override"}),"\nand ",(0,t.jsx)(n.code,{children:"cssVariablesResolver"}),", then these variables are rendered into ",(0,t.jsx)(n.code,{children:"<style />"})," tag next to your application.\nYou can learn more about Mantine CSS variables in the ",(0,t.jsx)(n.a,{href:"/styles/css-variables/",children:"CSS variables guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider cssVariablesSelector=\"html\">\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"withcssvariables",children:"withCssVariables"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"withCssVariables"})," determines whether theme CSS variables should be added to given ",(0,t.jsx)(n.code,{children:"cssVariablesSelector"}),".\nBy default, it is set to ",(0,t.jsx)(n.code,{children:"true"}),", you should not change it unless you want to manage CSS variables\nvia ",(0,t.jsx)(n.code,{children:".css"})," file (Note that in this case you will need to generate all theme tokens\nthat are not a part of the default theme on your side)."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider withCssVariables={false}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"getrootelement",children:"getRootElement"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"getRootElement"})," is a function that returns the root application (usually ",(0,t.jsx)(n.code,{children:"html"}),") element to set ",(0,t.jsx)(n.code,{children:"data-mantine-color-scheme"})," attribute.\nDefault value is ",(0,t.jsx)(n.code,{children:"() => document.documentElement"})," which means that ",(0,t.jsx)(n.code,{children:"data-mantine-color-scheme"}),"\nattribute will be added to ",(0,t.jsx)(n.code,{children:"<html />"})," tag. You can learn more about color scheme management in the\n",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"color schemes guide"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\n\nconst getRootElement = () => (typeof window === 'undefined' ? undefined : document.body);\n\nfunction Demo() {\n  return (\n    <MantineProvider getRootElement={getRootElement}>\n      <App />\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"classnamesprefix",children:"classNamesPrefix"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"classNamesPrefix"})," is a prefix for components static classes (for example ",(0,t.jsx)(n.code,{children:"{selector}-Text-root"}),").\nDefault value is ",(0,t.jsx)(n.code,{children:"mantine"})," – all components will have ",(0,t.jsx)(n.code,{children:"mantine-"})," prefix in their ",(0,t.jsx)(n.strong,{children:"static classes"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Text, MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider>\n      <Text>Just some text</Text>\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In this case (default ",(0,t.jsx)(n.code,{children:"classNamesPrefix"}),"), ",(0,t.jsx)(n.a,{href:"/core/text",children:"Text"})," component will have the following classes:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-focus-auto"})," – global utility class"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"m-3nrA4eL"})," – component class, usually a random string, with this class library styles are applied"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-Text-root"})," – component static class, part of ",(0,t.jsx)(n.a,{href:"/styles/styles-api",children:"Styles API"})]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["With ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," you can change only ",(0,t.jsx)(n.strong,{children:"static class"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Text, MantineProvider } from '@mantine/core';\n\nfunction Demo() {\n  return (\n    <MantineProvider classNamesPrefix=\"app\">\n      <Text>Just some text</Text>\n    </MantineProvider>\n  );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now ",(0,t.jsx)(n.a,{href:"/core/text",children:"Text"})," component will have the following classes:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mantine-focus-auto"})," – ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," does not impact global utility classes – it is static and ",(0,t.jsx)(n.strong,{children:"cannot be changed"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"m-3nrA4eL"})," – ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," does not impact library class – it is static and ",(0,t.jsx)(n.strong,{children:"cannot be changed"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"app-Text-root"})," – component static class has ",(0,t.jsx)(n.code,{children:"classNamesPrefix"})," instead of ",(0,t.jsx)(n.code,{children:"mantine"})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"getstylenonce",children:"getStyleNonce"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"getStyleNonce"})," is a function to generate ",(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce",children:"nonce"})," attribute added to dynamic generated ",(0,t.jsx)(n.code,{children:"<style />"})," tags."]}),"\n",(0,t.jsx)(n.h3,{id:"cssvariablesresolver",children:"cssVariablesResolver"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"cssVariablesResolver"})," is a function to generate CSS variables styles based on the ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme object"}),".\nYou can learn more about Mantine CSS variables in the ",(0,t.jsx)(n.a,{href:"/styles/css-variables#css-variables-resolver",children:"CSS variables guide"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"mantinethemeprovider",children:"MantineThemeProvider"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineThemeProvider"})," allows overriding ",(0,t.jsx)(n.a,{href:"/theming/theme-object",children:"theme"})," values for a subtree of components.\nNote that values that are used to generate ",(0,t.jsx)(n.a,{href:"/styles/css-variables",children:"CSS variables"})," cannot be overridden with ",(0,t.jsx)(n.code,{children:"MantineThemeProvider"}),".\nFor example, you cannot use ",(0,t.jsx)(n.code,{children:"MantineThemeProvider"})," to override ",(0,t.jsx)(n.code,{children:"colors"})," or ",(0,t.jsx)(n.code,{children:"fontSizes"}),"."]}),"\n",(0,t.jsx)(r,{data:m}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Difference between MantineProvider and MantineThemeProvider"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineProvider"})," is used for:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Color scheme management"}),"\n",(0,t.jsx)(n.li,{children:"CSS variables generation"}),"\n",(0,t.jsx)(n.li,{children:"Providing theme context"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"MantineThemeProvider"})," is only used to change theme context – it does not generate CSS variables or manage color scheme."]}),"\n",(0,t.jsxs)(n.p,{children:["It is not recommended to have more than one ",(0,t.jsx)(n.code,{children:"MantineProvider"})," in your application, but you can have as many ",(0,t.jsx)(n.code,{children:"MantineThemeProvider"})," as you need."]}),"\n"]})]})}var v=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(u,Object.assign({},e,{children:(0,t.jsx)(x,e)}))}}},function(e){e.O(0,[1300,178,9774,2888,179],function(){return e(e.s=94629)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/about.html b/about/index.html
similarity index 86%
rename from about.html
rename to about/index.html
index 362c006ba99..658b97e5e36 100644
--- a/about.html
+++ b/about/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/2c53d1beec745d31.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2c53d1beec745d31.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/about-4f735a0558cb5bb6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">About Mantine</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/2c53d1beec745d31.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2c53d1beec745d31.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/about-4f735a0558cb5bb6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">About Mantine</h1>
 <p class="MdxTypography_paragraph__Lp7wh">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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases/tag/1.0.0">May 3rd, 2021</a>,
 and since then, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases">more than 150 releases have been published</a>.</p>
@@ -56,4 +56,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineLogo</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;blue&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/about","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/about","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/app-shell.html b/app-shell/index.html
similarity index 94%
rename from app-shell.html
rename to app-shell/index.html
index be2b8950154..f4878f598f7 100644
--- a/app-shell.html
+++ b/app-shell/index.html
@@ -3,4 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/1593bbbe851036b7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1593bbbe851036b7.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/pages/app-shell-61046ac56d7d6c3b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/app-shell","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/1593bbbe851036b7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1593bbbe851036b7.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/pages/app-shell-61046ac56d7d6c3b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/app-shell","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/changelog/7-0-0.html b/changelog/7-0-0/index.html
similarity index 87%
rename from changelog/7-0-0.html
rename to changelog/7-0-0/index.html
index e1ae49313c5..4364925c9f9 100644
--- a/changelog/7-0-0.html
+++ b/changelog/7-0-0/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/1347-e8c7bcc60db06dc5.js" defer=""></script><script src="/_next/static/chunks/9077-a05e7f12524f0a6d.js" defer=""></script><script src="/_next/static/chunks/pages/changelog/7-0-0-f8f598f970f00b71.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/changelog/7-0-0">Version v7.0.0</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/changelog/previous-versions">Previous versions</a></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Version v7.0.0</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root"></p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Release date</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases/tag/7.0.0"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-calendar" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg></div>Some time this year</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source code</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases/tag/7.0.0"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>Release on GitHub</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="migration-to-native-css" data-heading="Migration to native CSS" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#migration-to-native-css">Migration to native CSS</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/1347-e8c7bcc60db06dc5.js" defer=""></script><script src="/_next/static/chunks/9077-a05e7f12524f0a6d.js" defer=""></script><script src="/_next/static/chunks/pages/changelog/7-0-0-f8f598f970f00b71.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/changelog/7-0-0/">Version v7.0.0</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/changelog/previous-versions/">Previous versions</a></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Version v7.0.0</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root"></p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Release date</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases/tag/7.0.0"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-calendar" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg></div>Some time this year</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source code</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/releases/tag/7.0.0"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>Release on GitHub</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="migration-to-native-css" data-heading="Migration to native CSS" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#migration-to-native-css">Migration to native CSS</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine no longer depends on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://emotion.sh/">Emotion</a> for styles generation. All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code>
 packages are now shipped with native CSS files which can be imported from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/{package}/styles.css</code>,
 for example:</p>
@@ -13,21 +13,21 @@
 Next.js app directory.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Important breaking changes:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createStyles</code> function is no longer available, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> or any other styling solution of your choice instead</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createStyles</code> function is no longer available, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> or any other styling solution of your choice instead</li>
 <li class="MdxTypography_li__JpNrx">Components no longer support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sx</code> prop. You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> props instead.</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> prop no longer supports nested selectors</li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">It is now recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> to style Mantine components.
-To update your project to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a>, follow the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/6x-to-7x">6.x → 7.x migration guide</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">It is now recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> to style Mantine components.
+To update your project to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a>, follow the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/6x-to-7x/">6.x → 7.x migration guide</a>.</p>
 <div id="vanilla-extract-integration" data-heading="Vanilla extract integration" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#vanilla-extract-integration">Vanilla extract integration</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">If you prefer CSS-in-JS syntax for styling, you can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract">Vanilla extract</a>
+<p class="MdxTypography_paragraph__Lp7wh">If you prefer CSS-in-JS syntax for styling, you can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract/">Vanilla extract</a>
 as a TypeScript CSS preprocessor. You will be able to use most of Mantine styling features
-with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract">Vanilla extract</a>.</p>
+with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract/">Vanilla extract</a>.</p>
 <div id="system-color-scheme-support" data-heading="System color scheme support" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#system-color-scheme-support">System color scheme support</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">All components now support system color scheme – when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorScheme</code> value is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code>,
 components will use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">prefers-color-scheme</code> media query to determine if the user prefers light or dark color scheme.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code> is not the default value. You need to set it manually to enable system color scheme support
-both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> and in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes#colorschemescript">ColorSchemeScript</a>:</p>
+both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> and in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/#colorschemescript">ColorSchemeScript</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">ColorSchemeScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -41,9 +41,9 @@
   );
 }</code></pre></div></div></div></div>
 <div id="built-in-color-scheme-manager" data-heading="Built-in color scheme manager" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#built-in-color-scheme-manager">Built-in color scheme manager</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> now comes with a built-in color scheme manager.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> now comes with a built-in color scheme manager.
 It is no longer required to use any other components to set up color scheme logic.
-Color scheme can be changed with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes#use-mantine-color-scheme-hook">useMantineColorScheme hook</a>:</p>
+Color scheme can be changed with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/#use-mantine-color-scheme-hook">useMantineColorScheme hook</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Light</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Dark</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Auto</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Clear</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useMantineColorScheme, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -59,20 +59,20 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="css-modules-and-postcss-preset" data-heading="CSS modules and PostCSS preset" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#css-modules-and-postcss-preset">CSS modules and PostCSS preset</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> is now the recommended way to style Mantine components,
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> is now the recommended way to style Mantine components,
 although it is not required – you can choose any other styling solution of your choice.</p>
-<p class="MdxTypography_paragraph__Lp7wh">It is also recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>. It includes
-mixins and functions to simplify styling of Mantine components. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>
+<p class="MdxTypography_paragraph__Lp7wh">It is also recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>. It includes
+mixins and functions to simplify styling of Mantine components. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>
 is included in all templates.</p>
 <div id="global-styles" data-heading="Global styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#global-styles">Global styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Mantine no longer includes normalize.css. Instead, it uses a bare minimum set of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/global-styles">global styles</a>.
+<p class="MdxTypography_paragraph__Lp7wh">Mantine no longer includes normalize.css. Instead, it uses a bare minimum set of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/global-styles/">global styles</a>.
 These styles are part of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package and are applied automatically when you import
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core/styles.css</code> in your application. Note that these styles cannot be decoupled from the
 rest of the library.</p>
 <div id="mantine-as-a-headless-ui-library" data-heading="Mantine as a headless UI library" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#mantine-as-a-headless-ui-library">Mantine as a headless UI library</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can now use Mantine as a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled">headless</a> library. To achieve that, just do not import
+<p class="MdxTypography_paragraph__Lp7wh">You can now use Mantine as a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled/">headless</a> library. To achieve that, just do not import
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*/styles.css</code> in your application. Then you will be able to apply styles with
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <div id="createtheme-function" data-heading="createTheme function" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#createtheme-function">createTheme function</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createTheme</code> function is a replacement for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeOverride</code> type. Use it to create a theme
 override, it will give you autocomplete for all theme properties:</p>
@@ -91,9 +91,9 @@
   );
 }</code></pre></div></div></div></div>
 <div id="components-extend-functions" data-heading="Components extend functions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-extend-functions">Components extend functions</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All components that support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> now have a static <code class="m-b183c0a2 mantine-Code-root" dir="ltr">extend</code> function which allows getting autocomplete when customizing
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">defaultProps</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">classNames and styles</a> of the component
-on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">All components that support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> now have a static <code class="m-b183c0a2 mantine-Code-root" dir="ltr">extend</code> function which allows getting autocomplete when customizing
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">defaultProps</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">classNames and styles</a> of the component
+on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -127,7 +127,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="classnames-based-on-component-props" data-heading="classNames based on component props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#classnames-based-on-component-props">classNames based on component props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can now get component props in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">classNames and styles</a> to conditionally apply styles.
+<p class="MdxTypography_paragraph__Lp7wh">You can now get component props in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">classNames and styles</a> to conditionally apply styles.
 This feature is a more powerful replacement for styles params.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-686577e7 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R3a7tbblu6" id="mantine-R3a7tbblu6-label">Required input<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Required input" required="" aria-invalid="false" id="mantine-R3a7tbblu6"/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R5a7tbblu6" id="mantine-R5a7tbblu6-label">Input with error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-error="true"><input class="m-933d67aa m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" data-error="true" placeholder="Input with error" aria-invalid="true" id="mantine-R5a7tbblu6"/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> cx <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;clsx&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -153,8 +153,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="components-css-variables" data-heading="Components CSS variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-css-variables">Components CSS variables</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can now customize components <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">CSS variables</a> to change component styles based on its props.
-For example, it can be used to add new <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes">sizes</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can now customize components <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">CSS variables</a> to change component styles based on its props.
+For example, it can be used to add new <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes/">sizes</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-height:calc(3.75rem * var(--mantine-scale));--button-padding-x:calc(1.875rem * var(--mantine-scale));--button-fz:calc(1.5rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxl" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXL Button</span></span></button><button style="--button-height:calc(1.5rem * var(--mantine-scale));--button-padding-x:calc(0.625rem * var(--mantine-scale));--button-fz:calc(0.625rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXS Button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>MantineProvider.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Inline.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, rem, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -199,7 +199,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="new-variants-system" data-heading="New variants system" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#new-variants-system">New variants system</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">All components now have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-variant</code> attribute on the root element, even if the component does not have any predefined variants.
-You can use it to apply styles to all components of the same type on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>:</p>
+You can use it to apply styles to all components of the same type on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(22.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper" data-variant="underline"><input class="m-93131372 m-8fb7ebe7 mantine-Input-input" data-variant="underline" placeholder="Underline input" aria-invalid="false"/></div><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;margin-top:var(--mantine-spacing-md)" class="m-6c018570 mantine-Input-wrapper" data-variant="filled"><input class="m-93131372 m-8fb7ebe7 mantine-Input-input" data-variant="filled" placeholder="Filled input" aria-invalid="false"/></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -223,10 +223,10 @@
 <p class="MdxTypography_paragraph__Lp7wh">There are multiple ways to customize component sizes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">With <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-size</code> attribute</li>
-<li class="MdxTypography_li__JpNrx">With component <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">CSS variables</a></li>
-<li class="MdxTypography_li__JpNrx">With <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes#sizes-with-static-css-variables">static CSS variables</a></li>
+<li class="MdxTypography_li__JpNrx">With component <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">CSS variables</a></li>
+<li class="MdxTypography_li__JpNrx">With <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes/#sizes-with-static-css-variables">static CSS variables</a></li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Example of customizing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> size with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-size</code> attribute:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of customizing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> size with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-size</code> attribute:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(22.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--input-height:var(--input-height-xxl);--input-fz:var(--mantine-font-size-xxl);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-b4c95450 m-6c018570 mantine-Input-wrapper" data-variant="default" data-size="xxl"><input class="m-2be5f2c7 m-8fb7ebe7 mantine-Input-input" data-variant="default" placeholder="Size XXL" aria-invalid="false"/></div><div style="--input-height:var(--input-height-xxs);--input-fz:var(--mantine-font-size-xxs);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;margin-top:var(--mantine-spacing-md)" class="m-b4c95450 m-6c018570 mantine-Input-wrapper" data-variant="default" data-size="xxs"><input class="m-2be5f2c7 m-8fb7ebe7 mantine-Input-input" data-variant="default" placeholder="Size XXS" aria-invalid="false"/></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, createTheme, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -245,8 +245,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="themevariantcolorresolver" data-heading="theme.variantColorResolver" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#themevariantcolorresolver">theme.variantColorResolver</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/theme-icon">ThemeIcon</a> and other
-components now support custom variants with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-variant-resolver">variantColorResolver</a>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/theme-icon/">ThemeIcon</a> and other
+components now support custom variants with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-variant-resolver">variantColorResolver</a>
 – it supports both changing colors of existing variants and adding new variants.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-lime-4);--button-hover:var(--mantine-color-lime-5);--button-color:var(--mantine-color-black);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Lime filled button</span></span></button><button style="--button-bg:rgba(253, 126, 20, 0.1);--button-hover:rgba(253, 126, 20, 0.15);--button-color:rgba(228, 113, 18, 1);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid #fd7e14" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Orange light button</span></span></button><button style="--button-bg:var(--mantine-color-red-9);--button-hover:var(--mantine-color-red-8);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="danger" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Danger button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> {
   <span class="hljs-title class_">Button</span>,
@@ -313,7 +313,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="rem-units-scaling" data-heading="rem units scaling" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#rem-units-scaling">rem units scaling</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">It is now possible to scale <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem#rem-units-scaling">rem</a> units. It is useful when you want to change
+<p class="MdxTypography_paragraph__Lp7wh">It is now possible to scale <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/#rem-units-scaling">rem</a> units. It is useful when you want to change
 font-size of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">html</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code> element and preserve Mantine components sizes. For example, if you would like to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">html</code> font-size to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">10px</code> and scale Mantine components accordingly, you need
 to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scale</code> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / (10 / 16)</code> (16 – default font-size) = <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / 0.625</code> = <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1.6</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-pseudo">:root</span> {
@@ -380,7 +380,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="components-classes" data-heading="Components classes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-classes">Components classes</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Classes of each component are now available in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Component.classes</code> object. For example, you can
-find <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> classes in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button.classes</code>:</p>
+find <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> classes in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button.classes</code>:</p>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Key</th><th class="m-4e7aa4f3 mantine-Table-th">Class</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td">m-77c9d27d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">inner</td><td class="m-4e7aa4ef mantine-Table-td">m-80f1301b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">label</td><td class="m-4e7aa4ef mantine-Table-td">m-811560b9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">section</td><td class="m-4e7aa4ef mantine-Table-td">m-a74036a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">loader</td><td class="m-4e7aa4ef mantine-Table-td">m-a25b86ee</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">group</td><td class="m-4e7aa4ef mantine-Table-td">m-80d6d844</td></tr></tbody></table></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">You can use these classes to create components with the same styles as Mantine components:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -390,22 +390,22 @@
 }</code></pre></div></div></div></div>
 <div id="theme-object-changes" data-heading="Theme object changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theme-object-changes">Theme object changes</a></h2>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeight</code> is now <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> – it is now possible to specify multiple line heights. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> values are used in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component.</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colorScheme</code> is no longer available, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes#use-mantine-color-scheme-hook">useMantineColorScheme</a> to get color scheme value</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.dir</code> is no longer needed, direction is now managed by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl">DirectionProvider</a></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.loader</code> was removed, you can now configure default loader with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeight</code> is now <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> – it is now possible to specify multiple line heights. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> values are used in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component.</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colorScheme</code> is no longer available, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/#use-mantine-color-scheme-hook">useMantineColorScheme</a> to get color scheme value</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.dir</code> is no longer needed, direction is now managed by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl/">DirectionProvider</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.loader</code> was removed, you can now configure default loader with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.transitionTimingFunction</code> was removed</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusRingStyles</code> was replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusClassName</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.activeStyles</code> was replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.activeClassName</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.globalStyles</code> was removed</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fn</code> functions were removed, some of the functions are available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/color-functions">standalone utilities</a></li>
-<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem#rem-units-scaling">theme.scale</a> property controls rem units scaling</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fn</code> functions were removed, some of the functions are available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/color-functions/">standalone utilities</a></li>
+<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/#rem-units-scaling">theme.scale</a> property controls rem units scaling</li>
 <li class="MdxTypography_li__JpNrx">New <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontSmoothing</code> property determines whether font smoothing styles should be applied to the body element</li>
-<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-variant-resolver">theme.variantColorResolver</a> property allows customizing component colors per variant</li>
+<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-variant-resolver">theme.variantColorResolver</a> property allows customizing component colors per variant</li>
 </ul>
 <div id="colors-generator" data-heading="Colors generator" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors-generator">Colors generator</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-generation">@mantine/colors-generator</a> package is now available to generate
-color palettes based on single color value. It is also available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator">online tool</a>.
+<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-generation">@mantine/colors-generator</a> package is now available to generate
+color palettes based on single color value. It is also available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator/">online tool</a>.
 Note that it is usually better to generate colors in advance to avoid contrast issues.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { generateColors } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/colors-generator&#x27;</span>;
@@ -424,16 +424,16 @@
   );
 }</code></pre></div></div></div></div>
 <div id="new-setup-for-rtl" data-heading="New setup for RTL" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#new-setup-for-rtl">New setup for RTL</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package now exports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl">DirectionProvider</a> component, which should be used to configure the direction of the application.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package now exports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl/">DirectionProvider</a> component, which should be used to configure the direction of the application.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useDirection</code> hook can be used to toggle direction. All components now include RTL styles by default, it is no
-longer required to set up additional plugins. See <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl">RTL documentation</a> to learn more.</p>
+longer required to set up additional plugins. See <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl/">RTL documentation</a> to learn more.</p>
 <div id="react-18-only" data-heading="React 18+ only" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#react-18-only">React 18+ only</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Starting from version 7.0 Mantine no longer supports older React versions. The minimum supported version is now React 18.
 It is required because Mantine components now use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://react.dev/reference/react/useId">useId</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://react.dev/reference/react/useSyncExternalStore">useSyncExternalStore</a>
 hooks, which are available only in React 18.</p>
 <div id="left-and-right-section" data-heading="left and right section" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#left-and-right-section">left and right section</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Components that previously had <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">icon</code> props, now use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> instead of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">icon</code>.
-Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> sections:</p>
+Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> sections:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -444,9 +444,9 @@
   );
 }</code></pre></div></div></div></div>
 <div id="numberinput-changes" data-heading="NumberInput changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#numberinput-changes">NumberInput changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/number-input">NumberInput</a> was migrated to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://s-yadav.github.io/react-number-format/">react-number-format</a>.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/number-input/">NumberInput</a> was migrated to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://s-yadav.github.io/react-number-format/">react-number-format</a>.
 It now supports more features and has improvements in cursor position management.
-Due to migration, some of the props were renamed – follow the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/number-input">documentation</a> to learn about the changes.</p>
+Due to migration, some of the props were renamed – follow the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/number-input/">documentation</a> to learn about the changes.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="margin-bottom:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-NumberInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" for="mantine-R3aidbblu6" id="mantine-R3aidbblu6-label">With prefix</label><div class="m-6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Dollars" aria-invalid="false" id="mantine-R3aidbblu6" type="text" value="$100"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m-95e17d22 mantine-NumberInput-controls"><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-NumberInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" for="mantine-R5aidbblu6" id="mantine-R5aidbblu6-label">With suffix</label><div class="m-6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Percents" aria-invalid="false" id="mantine-R5aidbblu6" type="text" value="100%"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m-95e17d22 mantine-NumberInput-controls"><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -470,16 +470,16 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loader-changes" data-heading="Loader changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loader-changes">Loader changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component is now built with CSS only. This change improves performance and reduces
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component is now built with CSS only. This change improves performance and reduces
 HTML output of the component.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><span style="--loader-size:var(--loader-size-md);--loader-color:var(--mantine-color-blue-filled)" class="m-b34414df m-5ae2e3c mantine-Loader-root" data-size="md"></span></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1mij5bblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1qndmij5bblu6-dropdown" id="mantine-R1qndmij5bblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2mij5bblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3mij5bblu6-label">Type</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7fmij5bblu6" id="mantine-R7fmij5bblu6-oval" data-focus-ring="auto" checked="" value="oval"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R7fmij5bblu6-oval">Oval</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7fmij5bblu6" id="mantine-R7fmij5bblu6-bars" data-focus-ring="auto" value="bars"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7fmij5bblu6-bars">Bars</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7fmij5bblu6" id="mantine-R7fmij5bblu6-dots" data-focus-ring="auto" value="dots"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7fmij5bblu6-dots">Dots</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Loader</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;blue&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">Theme</a> object no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.loader</code> property –
-it is also now possible to add custom loaders on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a>.
-Specified <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> will be used in all components that use it under the hood (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay">LoadingOverlay</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stepper">Stepper</a>, etc.).</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">Theme</a> object no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.loader</code> property –
+it is also now possible to add custom loaders on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a>.
+Specified <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> will be used in all components that use it under the hood (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay/">LoadingOverlay</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stepper/">Stepper</a>, etc.).</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><svg class="m-5ae2e3c mantine-Loader-root" style="width:var(--loader-size);height:var(--loader-size);stroke:var(--loader-color)" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff"><g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6" stroke-opacity="0"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="6" stroke-opacity="0"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"></animate></circle></g></svg></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>RingLoader.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">RingLoader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./RingLoader&#x27;</span>;
 
@@ -502,8 +502,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="progress-changes" data-heading="Progress changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#progress-changes">Progress changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress">Progress</a> component now supports compound components pattern.
-Advanced features that were previously implemented in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress">Progress</a> are now supposed to be implemented with
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress/">Progress</a> component now supports compound components pattern.
+Advanced features that were previously implemented in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress/">Progress</a> are now supposed to be implemented with
 compound components instead.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--progress-size:var(--progress-size-xl)" class="m-db6d6462 mantine-Progress-root" data-size="xl"><div style="--progress-section-width:35%;--progress-section-color:var(--mantine-color-cyan-filled)" class="m-2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" aria-valuetext="35%"><div class="m-91e40b74 mantine-Progress-label">Documents</div></div><div style="--progress-section-width:28%;--progress-section-color:var(--mantine-color-pink-filled)" class="m-2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="28" aria-valuetext="28%"><div class="m-91e40b74 mantine-Progress-label">Photos</div></div><div style="--progress-section-width:15%;--progress-section-color:var(--mantine-color-orange-filled)" class="m-2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" aria-valuetext="15%"><div class="m-91e40b74 mantine-Progress-label">Other</div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Progress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -523,14 +523,14 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="table-changes" data-heading="Table changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#table-changes">Table changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/table">Table</a> component changes:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/table/">Table</a> component changes:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> support</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> support</li>
 <li class="MdxTypography_li__JpNrx">It is now required to use compound components instead of elements: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Table.Tr</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Table.Td</code>, etc.</li>
 <li class="MdxTypography_li__JpNrx">It is now easier to override styles – all styles are added with classes instead of deeply nested selectors on root element</li>
 <li class="MdxTypography_li__JpNrx">New props: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">borderColor</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withRowBorders</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">stripedColor</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlightOnHoverColor</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">withBorder</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withTableBorder</code></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">fontSize</code> prop was removed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fz</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> instead</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">fontSize</code> prop was removed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fz</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> instead</li>
 <li class="MdxTypography_li__JpNrx">New <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Table.ScrollContainer</code> component to create scrollable table</li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Element position</th><th class="m-4e7aa4f3 mantine-Table-th">Element name</th><th class="m-4e7aa4f3 mantine-Table-th">Symbol</th><th class="m-4e7aa4f3 mantine-Table-th">Atomic mass</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">6</td><td class="m-4e7aa4ef mantine-Table-td">Carbon</td><td class="m-4e7aa4ef mantine-Table-td">C</td><td class="m-4e7aa4ef mantine-Table-td">12.011</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">7</td><td class="m-4e7aa4ef mantine-Table-td">Nitrogen</td><td class="m-4e7aa4ef mantine-Table-td">N</td><td class="m-4e7aa4ef mantine-Table-td">14.007</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">39</td><td class="m-4e7aa4ef mantine-Table-td">Yttrium</td><td class="m-4e7aa4ef mantine-Table-td">Y</td><td class="m-4e7aa4ef mantine-Table-td">88.906</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">56</td><td class="m-4e7aa4ef mantine-Table-td">Barium</td><td class="m-4e7aa4ef mantine-Table-td">Ba</td><td class="m-4e7aa4ef mantine-Table-td">137.33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">58</td><td class="m-4e7aa4ef mantine-Table-td">Cerium</td><td class="m-4e7aa4ef mantine-Table-td">Ce</td><td class="m-4e7aa4ef mantine-Table-td">140.12</td></tr></tbody></table></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Table</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -560,7 +560,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="group-changes" data-heading="Group changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#group-changes">Group changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group">Group</a> component changes:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group/">Group</a> component changes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">position</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">justify</code> – it now supports all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">justify-content</code> values</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">noWrap</code> prop was replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">wrap=&quot;nowrap&quot;</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">wrap</code> prop now supports all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">flex-wrap</code> values</li>
@@ -589,23 +589,23 @@
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">compact</code> prop was removed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size=&quot;compact-XXX&quot;</code> instead</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftIcon</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightIcon</code> props were renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">uppercase</code> prop was removed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">tt</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> instead</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderPosition</code> prop was removed, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> is now always rendered in the center to prevent layout shifts</li>
-<li class="MdxTypography_li__JpNrx">Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button?t=styles-api">Button Styles API</a> documentation for more details</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">uppercase</code> prop was removed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">tt</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> instead</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderPosition</code> prop was removed, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> is now always rendered in the center to prevent layout shifts</li>
+<li class="MdxTypography_li__JpNrx">Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/?t=styles-api">Button Styles API</a> documentation for more details</li>
 </ul>
 <div id="appshell-changes" data-heading="AppShell changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#appshell-changes">AppShell changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/app-shell">AppShell</a> component was completely rewritten, it now supports more features:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/app-shell/">AppShell</a> component was completely rewritten, it now supports more features:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> now uses compound components pattern: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Navbar</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Aside</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Header</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Footer</code> are no longer exported from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package. Instead, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code>, etc.</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> now supports animations when navbar/aside are opened/closed</li>
 <li class="MdxTypography_li__JpNrx">Navbar/aside can now be collapsed on desktop – state is handled separately for mobile and desktop</li>
 <li class="MdxTypography_li__JpNrx">Header/footer can now be collapsed the same way as navbar/aside. For example, the header can be collapsed based on scroll position or direction.</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fixed</code> prop – all components have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position: fixed</code> styles, static positioning is no longer supported</li>
-<li class="MdxTypography_li__JpNrx">The documentation was updated, it now includes <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=BasicAppShell">10+ examples on a separate page</a></li>
+<li class="MdxTypography_li__JpNrx">The documentation was updated, it now includes <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=BasicAppShell">10+ examples on a separate page</a></li>
 </ul>
 <div id="simplegrid-changes" data-heading="SimpleGrid changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#simplegrid-changes">SimpleGrid changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/simple-grid">SimpleGrid</a> now uses object format to define grid breakpoints and spacing,
-it works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/simple-grid/">SimpleGrid</a> now uses object format to define grid breakpoints and spacing,
+it works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-R1aotbblu6{--sg-spacing-x:calc(0.625rem * var(--mantine-scale));--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:1;}@media(min-width: 48em){.__m__-R1aotbblu6{--sg-spacing-x:var(--mantine-spacing-xl);--sg-spacing-y:var(--mantine-spacing-xl);--sg-cols:2;}}@media(min-width: 75em){.__m__-R1aotbblu6{--sg-cols:5;}}</style><div class="m-2415a157 mantine-SimpleGrid-root __m__-R1aotbblu6"><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">1</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">2</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">3</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">4</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">5</p></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SimpleGrid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -624,8 +624,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="grid-changes" data-heading="Grid changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#grid-changes">Grid changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid">Grid</a> now uses object format in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gutter</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">offset</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">span</code> and order props,
-all props now work the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid/">Grid</a> now uses object format in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gutter</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">offset</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">span</code> and order props,
+all props now work the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-R1aplbblu6{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m-410352e9 mantine-Grid-root __m__-R1aplbblu6"><div class="m-dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-R6raplbblu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-R6raplbblu6{--col-flex-basis:50%;--col-max-width:50%;}}@media(min-width: 75em){.__m__-R6raplbblu6{--col-flex-basis:25%;--col-max-width:25%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-R6raplbblu6"><div class="m-548ba23a"><div class="m-60a4592e">1</div></div></div><style data-mantine-styles="inline">.__m__-Raraplbblu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-Raraplbblu6{--col-flex-basis:50%;--col-max-width:50%;}}@media(min-width: 75em){.__m__-Raraplbblu6{--col-flex-basis:25%;--col-max-width:25%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-Raraplbblu6"><div class="m-548ba23a"><div class="m-60a4592e">2</div></div></div><style data-mantine-styles="inline">.__m__-Reraplbblu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-Reraplbblu6{--col-flex-basis:50%;--col-max-width:50%;}}@media(min-width: 75em){.__m__-Reraplbblu6{--col-flex-basis:25%;--col-max-width:25%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-Reraplbblu6"><div class="m-548ba23a"><div class="m-60a4592e">3</div></div></div><style data-mantine-styles="inline">.__m__-Riraplbblu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-Riraplbblu6{--col-flex-basis:50%;--col-max-width:50%;}}@media(min-width: 75em){.__m__-Riraplbblu6{--col-flex-basis:25%;--col-max-width:25%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-Riraplbblu6"><div class="m-548ba23a"><div class="m-60a4592e">4</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -639,11 +639,11 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="image-changes" data-heading="Image changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#image-changes">Image changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/image">Image</a> component changes:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/image/">Image</a> component changes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Image</code> component no longer includes <code class="m-b183c0a2 mantine-Code-root" dir="ltr">figure</code> and other associated elements</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">caption</code> prop is no longer available</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> props are replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> props are replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a></li>
 <li class="MdxTypography_li__JpNrx">Placeholder functionality was replaced with fallback image</li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><img style="--image-radius:var(--mantine-radius-md);height:calc(12.5rem * var(--mantine-scale))" class="m-9e117634 mantine-Image-root" data-fallback="true" src="https://placehold.co/600x400?text=Placeholder"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -659,7 +659,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="spotlight-changes" data-heading="Spotlight changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#spotlight-changes">Spotlight changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/spotlight">Spotlight</a> changes:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/spotlight/">Spotlight</a> changes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">The logic is no longer based on React context</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">SpotlightProvider</code> was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code></li>
@@ -696,7 +696,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="carousel-changes" data-heading="Carousel changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#carousel-changes">Carousel changes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/carousel">Carousel</a> now uses object format for responsive values in
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/carousel/">Carousel</a> now uses object format for responsive values in
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideSize</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideGap</code> props instead of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">breakpoints</code> prop:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-R1asdbblu6{--carousel-slide-gap:0;--carousel-slide-size:100%;}@media(min-width: 48em){.__m__-R1asdbblu6{--carousel-slide-gap:var(--mantine-spacing-md);--carousel-slide-size:50%;}}@media(min-width: 62em){.__m__-R1asdbblu6{--carousel-slide-size:33.333333%;}}</style><div style="--carousel-height:calc(12.5rem * var(--mantine-scale));--carousel-control-size:calc(1.625rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm)" class="m-17884d0f mantine-Carousel-root __m__-R1asdbblu6" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m-a2dae653 mantine-Carousel-viewport"><div class="m-fcd81474 mantine-Carousel-container" data-orientation="horizontal"><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">1</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">2</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">3</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">4</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">5</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">6</div></div></div></div><div class="m-71ea3ab1 mantine-Carousel-indicators"></div><div class="m-39bc3463 mantine-Carousel-controls"><button class="mantine-focus-auto m-64f58e10 mantine-Carousel-control m-87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-64f58e10 mantine-Carousel-control m-87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Carousel</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/carousel&#x27;</span>;
 
@@ -718,7 +718,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="mantineprism-deprecation" data-heading="@mantine/prism deprecation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#mantineprism-deprecation">@mantine/prism deprecation</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/prism</code> package was deprecated in favor of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code> package. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/code-highlight">The new package</a> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://highlightjs.org/">highlight.js</a> instead of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://prismjs.com/">Prism</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/prism</code> package was deprecated in favor of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code> package. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/code-highlight/">The new package</a> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://highlightjs.org/">highlight.js</a> instead of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://prismjs.com/">Prism</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Button.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Button.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">Button</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CodeHighlightTabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/code-highlight&#x27;</span>;
@@ -769,7 +769,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="fieldset-component" data-heading="Fieldset component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#fieldset-component">Fieldset component</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/fieldset">Fieldset</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/fieldset/">Fieldset</a> component:</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(31.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><fieldset style="--fieldset-radius:var(--mantine-radius-sm)" class="m-84c9523a m-e9408a47 mantine-Fieldset-root" data-variant="default" radius="sm"><legend class="m-90794832 mantine-Fieldset-legend">Personal information</legend><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rddattbblu6" id="mantine-Rddattbblu6-label">Your name</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your name" aria-invalid="false" id="mantine-Rddattbblu6"/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rldattbblu6" id="mantine-Rldattbblu6-label">Email</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Email" aria-invalid="false" id="mantine-Rldattbblu6"/></div></div></fieldset></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1mittbblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmittbblu6" id="mantine-R7dmittbblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R7dmittbblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmittbblu6" id="mantine-R7dmittbblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7dmittbblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmittbblu6" id="mantine-R7dmittbblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7dmittbblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2mittbblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Fieldset</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -781,13 +781,13 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="combobox-component" data-heading="Combobox component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-component">Combobox component</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">The new <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> component allows building custom select, autocomplete, tags input, multiselect and other
-similar components. It is used as a base for updated <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete">Autocomplete</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select">Select</a>,
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input">TagsInput</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select">MultiSelect</a> components.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> is very flexible and allows you to have full control over the component rendering and logic.
-Advanced features that were previously implemented in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete">Autocomplete</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select">Select</a>
-and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select">MultiSelect</a> are now supposed to be implemented with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> instead.</p>
-<p class="MdxTypography_paragraph__Lp7wh">You can find 50+ <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code> examples on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox">this page</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">The new <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> component allows building custom select, autocomplete, tags input, multiselect and other
+similar components. It is used as a base for updated <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete/">Autocomplete</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select/">Select</a>,
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input/">TagsInput</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select/">MultiSelect</a> components.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> is very flexible and allows you to have full control over the component rendering and logic.
+Advanced features that were previously implemented in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete/">Autocomplete</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select/">Select</a>
+and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select/">MultiSelect</a> are now supposed to be implemented with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> instead.</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can find 50+ <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code> examples on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/">this page</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-InputBase-root"><div class="m-6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R7av5bblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">InputBase</span>, <span class="hljs-title class_">Combobox</span>, useCombobox } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -832,8 +832,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="tagsinput-component" data-heading="TagsInput component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#tagsinput-component">TagsInput component</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input">TagsInput</a> component based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> component.
-The component is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select">MultiSelect</a> but allows entering custom values.</p>
+<p class="MdxTypography_paragraph__Lp7wh">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input/">TagsInput</a> component based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> component.
+The component is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select/">MultiSelect</a> but allows entering custom values.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" for="mantine-R1avtbblu6" id="mantine-R1avtbblu6-label">Press Enter to submit a tag</label><div class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick tag from list" aria-haspopup="listbox" autoComplete="off" id="mantine-R1avtbblu6" aria-invalid="false" value=""/></div></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -903,45 +903,45 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="other-changes" data-heading="Other changes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#other-changes">Other changes</a></h2>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> component</li>
-<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon#actionicongroup">ActionIcon.Group</a> component</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider">DatesProvider</a> now supports setting timezone</li>
+<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> component</li>
+<li class="MdxTypography_li__JpNrx">New <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/#actionicongroup">ActionIcon.Group</a> component</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider/">DatesProvider</a> now supports setting timezone</li>
 <li class="MdxTypography_li__JpNrx">All transitions are now disabled during color scheme change</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.respectReducedMotion</code> is now set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">false</code> by default – it caused a lot of confusion for users who did not know about it</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications">Notifications system</a> now exports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">notifications.updateState</code> function to update notifications state with a given callback</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/blockquote">Blockquote</a> component has new design</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/breadcrumbs">Breadcrumbs</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">separatorMargin</code> prop</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mainAxis</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">crossAxis</code> offset configuration</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider">Slider and RangeSlider</a> components <code class="m-b183c0a2 mantine-Code-root" dir="ltr">radius</code> prop now affects thumb as well as track</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select">NativeSelect</a> component now supports setting options as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">children</code> and options groups</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/anchor">Anchor</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code> prop which lets you configure how link will be underlined: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hover</code> (default), <code class="m-b183c0a2 mantine-Code-root" dir="ltr">always</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">never</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/affix">Affix</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">target</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">portalProps</code> instead</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/container">Container</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sizes</code> prop, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">CSS variables</a> to customize sizes on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> instead</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">useComponentDefaultProps</code> hook was renamed to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props#useprops-hook">useProps</a></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code> prop is now true by default in all overlay components (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/hover-card">HoverCard</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a>, etc.)</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AlphaSlider</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">HueSlider</code> components are no longer available, they can be used only as a part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker">ColorPicker</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> default root element is now <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;p /&gt;</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title">Title</a> no longer supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> props, only <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a> are available</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MediaQuery</code> component was removed – use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> to apply responsive styles</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/highlight">Highlight</a> component prop <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlightColor</code> was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip and Tooltip.Floating</a> components no longer support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> instead</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stack">Stack</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">spacing</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gap</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> and other <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> based components <code class="m-b183c0a2 mantine-Code-root" dir="ltr">icon</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package no longer depends on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.radix-ui.com/docs/primitives/components/scroll-area#scroll-area">Radix UI ScrollArea</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea</a> component is now a native Mantine component – it reduces bundle size, allows setting CSP for styles and improves performance (all styles are now applied with classes instead of inline <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;style /&gt;</code> tags)</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opacity</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">backgroundOpacity</code> to avoid collision with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opacity</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a> Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge?t=styles-api">Badge Styles API</a> documentation for more details</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider">Slider</a> Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider?t=styles-api">Slider Styles API</a> documentation for more details</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">strikethrough</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">italic</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transform</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">align</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">weight</code> prop – use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a> instead</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal">Portal</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">innerRef</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea</a> now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">x</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">y</code> values in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">offsetScrollbars</code> prop</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TransferList</code> component is no longer available as a part of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package, instead you can implement it with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> component (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox?e=TransferList">example</a>)</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/chip">Chip</a> component now supports custom check icon</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/password-input">PasswordInput</a> no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">visibilityToggleLabel</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">toggleTabIndex</code> props, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">visibilityToggleButtonProps</code> prop instead</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stepper">Stepper</a> now longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">breakpoint</code> prop, you can apply responsive styles with Styles API</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-input">ColorInput</a> no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownZIndex</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">portalProps</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">shadow</code> props, you can now pass these props with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">popoverProps</code> prop</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay">LoadingOverlay</a> props are now grouped by the component they are passed down to: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">overlayProps</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code> now replace props that were previously passed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">LoadingOverlay</code> directly</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/dropzone">Dropzone</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code> style prop instead</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/dialog">Dialog</a> component now supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper">Paper</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/affix">Affix</a> props, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionDuration</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transition</code> and other transition related props were replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/checkbox">Checkbox</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/radio">Radio</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/chip">Chip</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/switch">Switch</a> components now support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rootRef</code> prop which allows using them with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> and other similar components</li>
-</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/tiptap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rich text editor</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/previous-versions"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Previous versions</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog/7-0-0","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications/">Notifications system</a> now exports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">notifications.updateState</code> function to update notifications state with a given callback</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/blockquote/">Blockquote</a> component has new design</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/breadcrumbs/">Breadcrumbs</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">separatorMargin</code> prop</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mainAxis</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">crossAxis</code> offset configuration</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider/">Slider and RangeSlider</a> components <code class="m-b183c0a2 mantine-Code-root" dir="ltr">radius</code> prop now affects thumb as well as track</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select/">NativeSelect</a> component now supports setting options as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">children</code> and options groups</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/anchor/">Anchor</a> component now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code> prop which lets you configure how link will be underlined: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hover</code> (default), <code class="m-b183c0a2 mantine-Code-root" dir="ltr">always</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">never</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/affix/">Affix</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">target</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">portalProps</code> instead</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/container/">Container</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sizes</code> prop, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">CSS variables</a> to customize sizes on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> instead</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">useComponentDefaultProps</code> hook was renamed to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/#useprops-hook">useProps</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code> prop is now true by default in all overlay components (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/hover-card/">HoverCard</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a>, etc.)</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AlphaSlider</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">HueSlider</code> components are no longer available, they can be used only as a part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker/">ColorPicker</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> default root element is now <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;p /&gt;</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title/">Title</a> no longer supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> props, only <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a> are available</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MediaQuery</code> component was removed – use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> to apply responsive styles</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/highlight/">Highlight</a> component prop <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlightColor</code> was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip and Tooltip.Floating</a> components no longer support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> instead</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stack/">Stack</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">spacing</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gap</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> and other <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> based components <code class="m-b183c0a2 mantine-Code-root" dir="ltr">icon</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package no longer depends on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.radix-ui.com/docs/primitives/components/scroll-area#scroll-area">Radix UI ScrollArea</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea</a> component is now a native Mantine component – it reduces bundle size, allows setting CSP for styles and improves performance (all styles are now applied with classes instead of inline <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;style /&gt;</code> tags)</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opacity</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">backgroundOpacity</code> to avoid collision with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opacity</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a> Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/?t=styles-api">Badge Styles API</a> documentation for more details</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider/">Slider</a> Styles API selectors were changed, see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/slider/?t=styles-api">Slider Styles API</a> documentation for more details</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">strikethrough</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">italic</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transform</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">align</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">weight</code> prop – use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a> instead</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal/">Portal</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">innerRef</code> prop was renamed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea</a> now supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">x</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">y</code> values in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">offsetScrollbars</code> prop</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TransferList</code> component is no longer available as a part of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package, instead you can implement it with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> component (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=TransferList">example</a>)</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/chip/">Chip</a> component now supports custom check icon</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/password-input/">PasswordInput</a> no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">visibilityToggleLabel</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">toggleTabIndex</code> props, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">visibilityToggleButtonProps</code> prop instead</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stepper/">Stepper</a> now longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">breakpoint</code> prop, you can apply responsive styles with Styles API</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-input/">ColorInput</a> no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownZIndex</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">portalProps</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">shadow</code> props, you can now pass these props with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">popoverProps</code> prop</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay/">LoadingOverlay</a> props are now grouped by the component they are passed down to: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">overlayProps</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code> now replace props that were previously passed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">LoadingOverlay</code> directly</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/dropzone/">Dropzone</a> component no longer supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code> prop, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code> style prop instead</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/dialog/">Dialog</a> component now supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper/">Paper</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/affix/">Affix</a> props, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionDuration</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transition</code> and other transition related props were replaced with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/checkbox/">Checkbox</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/radio/">Radio</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/chip/">Chip</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/switch/">Switch</a> components now support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rootRef</code> prop which allows using them with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> and other similar components</li>
+</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/tiptap/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rich text editor</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/previous-versions/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Previous versions</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog/7-0-0","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/changelog/previous-versions.html b/changelog/previous-versions/index.html
similarity index 60%
rename from changelog/previous-versions.html
rename to changelog/previous-versions/index.html
index 693acb8f569..f91e4802ebe 100644
--- a/changelog/previous-versions.html
+++ b/changelog/previous-versions/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/changelog/previous-versions-e82db25d087ccbfa.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/changelog/7-0-0">Version v7.0.0</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/changelog/previous-versions">Previous versions</a></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Previous changelogs</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/changelog/previous-versions-e82db25d087ccbfa.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/changelog/7-0-0/">Version v7.0.0</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/changelog/previous-versions/">Previous versions</a></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Previous changelogs</h1>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://v5.mantine.dev/changelog/1-1-0/">Version 1.1.0</a> – May 19th, 2021</li>
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://v5.mantine.dev/changelog/1-3-0/">Version 1.3.0</a> – June 1st, 2021</li>
@@ -35,4 +35,4 @@
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://v5.mantine.dev/changelog/5-9-0/">Version 5.9.0</a> – December 1st, 2022</li>
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://v5.mantine.dev/changelog/5-10-0/">Version 5.10.0</a> – January 3rd, 2023</li>
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://v6.mantine.dev/changelog/6-0-0/">Version 6.0.0</a> – March 2nd, 2023</li>
-</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/7-0-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Version v7.0.0</p></div></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog/previous-versions","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/7-0-0/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Version v7.0.0</p></div></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog/previous-versions","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/colors-generator.html b/colors-generator.html
deleted file mode 100644
index c8b5e689d3f..00000000000
--- a/colors-generator.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Colors generator | Mantine</title><meta name="next-head-count" content="11"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/2f7f36020c7f1b11.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2f7f36020c7f1b11.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1333-769c51c7075e50db.js" defer=""></script><script src="/_next/static/chunks/pages/colors-generator-55b397ea41fc6dea.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="PageContentContainer_wrapper__H3HAY"><div class="PageContentContainer_container__piKiS"><div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine colors generator</h1><div class="ColorsInput_root__y2k1o"><div><div class="ColorsInput_input__Blm7P m-46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="md"><label style="--input-label-size:var(--mantine-font-size-md)" class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-size="md" for="mantine-R2krlu6" id="mantine-R2krlu6-label">Enter base color</label><div style="--input-height:var(--input-height-md);--input-fz:var(--mantine-font-size-md);--input-radius:var(--mantine-radius-md)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="md"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" aria-invalid="false" id="mantine-R2krlu6" value="#5474B4"/></div></div><div style="--cp-preview-size:var(--cp-preview-size-lg);--cp-width:var(--cp-width-lg);--cp-body-spacing:var(--mantine-spacing-lg);--cp-swatch-size:14.285714285714286%;--cp-thumb-size:var(--cp-thumb-size-lg);--cp-saturation-height:var(--cp-saturation-height-lg)" class="ColorsInput_colorPicker__3vaoK m-fee9c77 mantine-ColorPicker-wrapper" data-size="lg"><div class="ColorsInput_saturation__pa4Mk m-202a296e mantine-ColorPicker-saturation" role="slider" aria-valuenow="0.53333" aria-valuetext="rgba(84, 116, 180, 1)" tabindex="0"><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-color:hsl(220, 100%, 50%)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(90deg, #fff, transparent)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(0deg, #000, transparent)"></div><div style="background-color:#5474B4;--_thumb-y-offset:29.412000000000006%;--_thumb-x-offset:53.333%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div><div class="m-bffecc3e mantine-ColorPicker-body"><div class="m-3283bb96 mantine-ColorPicker-sliders"><div class="m-d856d47d mantine-ColorPicker-slider" data-hue="true" role="slider" aria-valuenow="220" aria-valuemax="360" aria-valuemin="0" tabindex="0" data-focus-ring="auto"><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image: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%))"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="box-shadow:rgba(0, 0, 0, .1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, .15) 0 0 calc(0.25rem * var(--mantine-scale)) inset"></div><div style="top:calc(0.0625rem * var(--mantine-scale));background:hsl(220, 100%, 50%);--_thumb-y-offset:0%;--_thumb-x-offset:61.111111111111114%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div></div></div></div><div style="--switch-height:var(--switch-height-md);--switch-width:var(--switch-width-md);--switch-thumb-size:var(--switch-thumb-size-md);--switch-label-font-size:var(--switch-label-font-size-md);--switch-track-label-padding:var(--switch-track-label-padding-md);--label-fz:var(--mantine-font-size-md);--label-lh:var(--label-lh-md);margin-top:var(--mantine-spacing-xl)" class="ColorsInput_switch___MnwZ m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-size="md" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input id="mantine-R6krlu6" type="checkbox" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R6krlu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R6krlu6">Display colors info</label></div></div></div><button style="--button-justify:space-between;--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);margin-top:var(--mantine-spacing-xl)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="md" data-block="true" data-with-left-section="true" data-with-right-section="true" type="button" justify="space-between"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-copy" style="width:calc(1.125rem * var(--mantine-scale))"><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span><span class="m-811560b9 mantine-Button-label">Copy URL</span><span class="m-a74036a mantine-Button-section" data-position="right"><span></span></span></span></button></div><div><label style="--input-label-size:var(--mantine-font-size-md)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Preset</label><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#63687C"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Blue gray</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5D4037"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Brown</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F06418"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Tomato</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fc8a08"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep orange</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#FFA903"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright orange</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#D9D02F"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Yellow</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6BD731"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright green</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2BDD66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Green</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#00B5FF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Light blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#099CFF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Sky blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5474B4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0063FF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1F32C4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4C5897"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale indigo</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4F23C0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Purple</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#504C97"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale purple</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7B2EDA"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Violet</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6B31B2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale violet</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#8931B2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Dark pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C02ADF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F018E8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F01879"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Magenta</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F0185C"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C91A52"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C91A25"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F21616"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Red</span></span></button></div></div></div><div style="--group-gap:0;--group-wrap:nowrap" class="ColorsList_root__ZzB5l m-4081bf90 mantine-Group-root"><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#eef3ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">0</span><span class="ColorsList_hex__4T0M_">#eef3ff</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dce4f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">1</span><span class="ColorsList_hex__4T0M_">#dce4f5</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b9c7e2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">2</span><span class="ColorsList_hex__4T0M_">#b9c7e2</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#94a8d0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">3</span><span class="ColorsList_hex__4T0M_">#94a8d0</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#748dc1"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">4</span><span class="ColorsList_hex__4T0M_">#748dc1</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5f7cb8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">5</span><span class="ColorsList_hex__4T0M_">#5f7cb8</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root" data-base="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5474b4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">6</span><span class="ColorsList_hex__4T0M_">#5474b4</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#44639f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">7</span><span class="ColorsList_hex__4T0M_">#44639f</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#39588f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">8</span><span class="ColorsList_hex__4T0M_">#39588f</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2d4b81"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">9</span><span class="ColorsList_hex__4T0M_">#2d4b81</span></div></span></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-sm);display:block" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Variants preview</div><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;--mantine-color-__colors-generator__-0: #eef3ff;--mantine-color-__colors-generator__-1: #dce4f5;--mantine-color-__colors-generator__-2: #b9c7e2;--mantine-color-__colors-generator__-3: #94a8d0;--mantine-color-__colors-generator__-4: #748dc1;--mantine-color-__colors-generator__-5: #5f7cb8;--mantine-color-__colors-generator__-6: #5474b4;--mantine-color-__colors-generator__-7: #44639f;--mantine-color-__colors-generator__-8: #39588f;--mantine-color-__colors-generator__-9: #2d4b81;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);--mantine-color-__colors-generator__-filled: #39588f;--mantine-color-__colors-generator__-filled-hover: #2d4b81;--mantine-color-__colors-generator__-light: rgba(84, 116, 180, 0.15);--mantine-color-__colors-generator__-light-hover: rgba(84, 116, 180, 0.2);--mantine-color-__colors-generator__-light-color: #94a8d0;--mantine-color-__colors-generator__-outline: #748dc1;--mantine-color-__colors-generator__-outline-hover: rgba(116, 141, 193, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);--mantine-color-__colors-generator__-filled: #5474b4;--mantine-color-__colors-generator__-filled-hover: #44639f;--mantine-color-__colors-generator__-light: rgba(84, 116, 180, 0.1);--mantine-color-__colors-generator__-light-hover: rgba(84, 116, 180, 0.12);--mantine-color-__colors-generator__-light-color: #5474b4;--mantine-color-__colors-generator__-outline: #5474b4;--mantine-color-__colors-generator__-outline-hover: rgba(84, 116, 180, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table" data-with-table-border="true"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Filled</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Light</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Outline</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Subtle</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:var(--mantine-color-__colors-generator__-filled);--button-hover:var(--mantine-color-__colors-generator__-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:var(--mantine-color-__colors-generator__-light);--button-hover:var(--mantine-color-__colors-generator__-light-hover);--button-color:var(--mantine-color-__colors-generator__-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-__colors-generator__-outline-hover);--button-color:var(--mantine-color-__colors-generator__-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-__colors-generator__-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-__colors-generator__-light-hover);--button-color:var(--mantine-color-__colors-generator__-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td></tr></tbody></table></div></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Colors array</div><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-punctuation">[</span>
-  <span class="hljs-string">&quot;#eef3ff&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#dce4f5&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#b9c7e2&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#94a8d0&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#748dc1&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#5f7cb8&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#5474b4&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#44639f&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#39588f&quot;</span><span class="hljs-punctuation">,</span>
-  <span class="hljs-string">&quot;#2d4b81&quot;</span>
-<span class="hljs-punctuation">]</span></code></pre></div></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Usage with MantineProvider</div><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">MantineColorsTuple</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">const</span> <span class="hljs-attr">myColor</span>: <span class="hljs-title class_">MantineColorsTuple</span> = [
-  <span class="hljs-string">&#x27;#eef3ff&#x27;</span>,
-  <span class="hljs-string">&#x27;#dce4f5&#x27;</span>,
-  <span class="hljs-string">&#x27;#b9c7e2&#x27;</span>,
-  <span class="hljs-string">&#x27;#94a8d0&#x27;</span>,
-  <span class="hljs-string">&#x27;#748dc1&#x27;</span>,
-  <span class="hljs-string">&#x27;#5f7cb8&#x27;</span>,
-  <span class="hljs-string">&#x27;#5474b4&#x27;</span>,
-  <span class="hljs-string">&#x27;#44639f&#x27;</span>,
-  <span class="hljs-string">&#x27;#39588f&#x27;</span>,
-  <span class="hljs-string">&#x27;#2d4b81&#x27;</span>
-];
-
-<span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
-  <span class="hljs-attr">colors</span>: {
-    myColor,
-  }
-});
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineProvider</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">{theme}</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div></div></div></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/colors-generator","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/colors-generator/index.html b/colors-generator/index.html
new file mode 100644
index 00000000000..9ceda7e5a17
--- /dev/null
+++ b/colors-generator/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Colors generator | Mantine</title><meta name="next-head-count" content="11"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/2f7f36020c7f1b11.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2f7f36020c7f1b11.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1333-769c51c7075e50db.js" defer=""></script><script src="/_next/static/chunks/pages/colors-generator-7af0078c6aa3ab46.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="PageContentContainer_wrapper__H3HAY"><div class="PageContentContainer_container__piKiS"><div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine colors generator</h1><div class="ColorsInput_root__y2k1o"><div><div class="ColorsInput_input__Blm7P m-46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="md"><label style="--input-label-size:var(--mantine-font-size-md)" class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-size="md" for="mantine-R2krlu6" id="mantine-R2krlu6-label">Enter base color</label><div style="--input-height:var(--input-height-md);--input-fz:var(--mantine-font-size-md);--input-radius:var(--mantine-radius-md)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="md"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" aria-invalid="false" id="mantine-R2krlu6" value="#5474B4"/></div></div><div style="--cp-preview-size:var(--cp-preview-size-lg);--cp-width:var(--cp-width-lg);--cp-body-spacing:var(--mantine-spacing-lg);--cp-swatch-size:14.285714285714286%;--cp-thumb-size:var(--cp-thumb-size-lg);--cp-saturation-height:var(--cp-saturation-height-lg)" class="ColorsInput_colorPicker__3vaoK m-fee9c77 mantine-ColorPicker-wrapper" data-size="lg"><div class="ColorsInput_saturation__pa4Mk m-202a296e mantine-ColorPicker-saturation" role="slider" aria-valuenow="0.53333" aria-valuetext="rgba(84, 116, 180, 1)" tabindex="0"><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-color:hsl(220, 100%, 50%)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(90deg, #fff, transparent)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(0deg, #000, transparent)"></div><div style="background-color:#5474B4;--_thumb-y-offset:29.412000000000006%;--_thumb-x-offset:53.333%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div><div class="m-bffecc3e mantine-ColorPicker-body"><div class="m-3283bb96 mantine-ColorPicker-sliders"><div class="m-d856d47d mantine-ColorPicker-slider" data-hue="true" role="slider" aria-valuenow="220" aria-valuemax="360" aria-valuemin="0" tabindex="0" data-focus-ring="auto"><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image: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%))"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="box-shadow:rgba(0, 0, 0, .1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, .15) 0 0 calc(0.25rem * var(--mantine-scale)) inset"></div><div style="top:calc(0.0625rem * var(--mantine-scale));background:hsl(220, 100%, 50%);--_thumb-y-offset:0%;--_thumb-x-offset:61.111111111111114%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div></div></div></div><div style="--switch-height:var(--switch-height-md);--switch-width:var(--switch-width-md);--switch-thumb-size:var(--switch-thumb-size-md);--switch-label-font-size:var(--switch-label-font-size-md);--switch-track-label-padding:var(--switch-track-label-padding-md);--label-fz:var(--mantine-font-size-md);--label-lh:var(--label-lh-md);margin-top:var(--mantine-spacing-xl)" class="ColorsInput_switch___MnwZ m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-size="md" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input id="mantine-R6krlu6" type="checkbox" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R6krlu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R6krlu6">Display colors info</label></div></div></div><button style="--button-justify:space-between;--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-radius:var(--mantine-radius-md);margin-top:var(--mantine-spacing-xl)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="md" data-block="true" data-with-left-section="true" data-with-right-section="true" type="button" justify="space-between"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-copy" style="width:calc(1.125rem * var(--mantine-scale))"><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span><span class="m-811560b9 mantine-Button-label">Copy URL</span><span class="m-a74036a mantine-Button-section" data-position="right"><span></span></span></span></button></div><div><label style="--input-label-size:var(--mantine-font-size-md)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Preset</label><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#63687C"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Blue gray</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5D4037"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Brown</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F06418"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Tomato</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fc8a08"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep orange</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#FFA903"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright orange</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#D9D02F"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Yellow</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6BD731"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright green</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2BDD66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Green</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#00B5FF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Light blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#099CFF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Sky blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5474B4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0063FF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1F32C4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep blue</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4C5897"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale indigo</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4F23C0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Purple</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#504C97"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale purple</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7B2EDA"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Violet</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6B31B2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale violet</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#8931B2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Dark pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C02ADF"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F018E8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pink</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F01879"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Magenta</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F0185C"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Bright red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C91A52"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Pale red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C91A25"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Deep red</span></span></button><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><div style="--cs-size:calc(1.25rem * var(--mantine-scale))" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#F21616"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></span><span class="m-811560b9 mantine-Button-label">Red</span></span></button></div></div></div><div style="--group-gap:0;--group-wrap:nowrap" class="ColorsList_root__ZzB5l m-4081bf90 mantine-Group-root"><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#eef3ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">0</span><span class="ColorsList_hex__4T0M_">#eef3ff</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dce4f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">1</span><span class="ColorsList_hex__4T0M_">#dce4f5</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b9c7e2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">2</span><span class="ColorsList_hex__4T0M_">#b9c7e2</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#94a8d0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">3</span><span class="ColorsList_hex__4T0M_">#94a8d0</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#748dc1"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">4</span><span class="ColorsList_hex__4T0M_">#748dc1</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-black)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5f7cb8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">5</span><span class="ColorsList_hex__4T0M_">#5f7cb8</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root" data-base="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5474b4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">6</span><span class="ColorsList_hex__4T0M_">#5474b4</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#44639f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">7</span><span class="ColorsList_hex__4T0M_">#44639f</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#39588f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">8</span><span class="ColorsList_hex__4T0M_">#39588f</span></div></span></div></div><div class="ColorsList_item__RmNdL"><div style="--cs-radius:0;color:var(--mantine-color-white)" class="mantine-focus-auto ColorsList_swatch__4rMEJ m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2d4b81"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><div class="ColorsList_label__uy45Y"><span class="ColorsList_index__4xZTW">9</span><span class="ColorsList_hex__4T0M_">#2d4b81</span></div></span></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-sm);display:block" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Variants preview</div><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;--mantine-color-__colors-generator__-0: #eef3ff;--mantine-color-__colors-generator__-1: #dce4f5;--mantine-color-__colors-generator__-2: #b9c7e2;--mantine-color-__colors-generator__-3: #94a8d0;--mantine-color-__colors-generator__-4: #748dc1;--mantine-color-__colors-generator__-5: #5f7cb8;--mantine-color-__colors-generator__-6: #5474b4;--mantine-color-__colors-generator__-7: #44639f;--mantine-color-__colors-generator__-8: #39588f;--mantine-color-__colors-generator__-9: #2d4b81;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);--mantine-color-__colors-generator__-filled: #39588f;--mantine-color-__colors-generator__-filled-hover: #2d4b81;--mantine-color-__colors-generator__-light: rgba(84, 116, 180, 0.15);--mantine-color-__colors-generator__-light-hover: rgba(84, 116, 180, 0.2);--mantine-color-__colors-generator__-light-color: #94a8d0;--mantine-color-__colors-generator__-outline: #748dc1;--mantine-color-__colors-generator__-outline-hover: rgba(116, 141, 193, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);--mantine-color-__colors-generator__-filled: #5474b4;--mantine-color-__colors-generator__-filled-hover: #44639f;--mantine-color-__colors-generator__-light: rgba(84, 116, 180, 0.1);--mantine-color-__colors-generator__-light-hover: rgba(84, 116, 180, 0.12);--mantine-color-__colors-generator__-light-color: #5474b4;--mantine-color-__colors-generator__-outline: #5474b4;--mantine-color-__colors-generator__-outline-hover: rgba(84, 116, 180, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table" data-with-table-border="true"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Filled</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Light</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Outline</th><th style="text-align:center" class="m-4e7aa4f3 mantine-Table-th" data-with-column-border="true">Subtle</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:var(--mantine-color-__colors-generator__-filled);--button-hover:var(--mantine-color-__colors-generator__-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:var(--mantine-color-__colors-generator__-light);--button-hover:var(--mantine-color-__colors-generator__-light-hover);--button-color:var(--mantine-color-__colors-generator__-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-__colors-generator__-outline-hover);--button-color:var(--mantine-color-__colors-generator__-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-__colors-generator__-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td><td class="m-4e7aa4ef mantine-Table-td" data-with-column-border="true"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-__colors-generator__-light-hover);--button-color:var(--mantine-color-__colors-generator__-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></td></tr></tbody></table></div></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Colors array</div><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-punctuation">[</span>
+  <span class="hljs-string">&quot;#eef3ff&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#dce4f5&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#b9c7e2&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#94a8d0&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#748dc1&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#5f7cb8&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#5474b4&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#44639f&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#39588f&quot;</span><span class="hljs-punctuation">,</span>
+  <span class="hljs-string">&quot;#2d4b81&quot;</span>
+<span class="hljs-punctuation">]</span></code></pre></div></div></div></div><div style="--input-label-size:var(--mantine-font-size-md);margin-top:var(--mantine-spacing-xl)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="md">Usage with MantineProvider</div><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">MantineColorsTuple</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">const</span> <span class="hljs-attr">myColor</span>: <span class="hljs-title class_">MantineColorsTuple</span> = [
+  <span class="hljs-string">&#x27;#eef3ff&#x27;</span>,
+  <span class="hljs-string">&#x27;#dce4f5&#x27;</span>,
+  <span class="hljs-string">&#x27;#b9c7e2&#x27;</span>,
+  <span class="hljs-string">&#x27;#94a8d0&#x27;</span>,
+  <span class="hljs-string">&#x27;#748dc1&#x27;</span>,
+  <span class="hljs-string">&#x27;#5f7cb8&#x27;</span>,
+  <span class="hljs-string">&#x27;#5474b4&#x27;</span>,
+  <span class="hljs-string">&#x27;#44639f&#x27;</span>,
+  <span class="hljs-string">&#x27;#39588f&#x27;</span>,
+  <span class="hljs-string">&#x27;#2d4b81&#x27;</span>
+];
+
+<span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
+  <span class="hljs-attr">colors</span>: {
+    myColor,
+  }
+});
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineProvider</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">{theme}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
+  );
+}</code></pre></div></div></div></div></div></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/colors-generator","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/combobox.html b/combobox/index.html
similarity index 63%
rename from combobox.html
rename to combobox/index.html
index a69d2811049..28a862ed27a 100644
--- a/combobox.html
+++ b/combobox/index.html
@@ -3,4 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a31c84cc8d06a9d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a31c84cc8d06a9d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/combobox-b7914902b2865404.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div class="ComboboxShell_root__2qhtZ"><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-Rimlu6-dropdown" id="mantine-Rimlu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><main class="Shell_main__lcVaI" id="mdx" style="padding-left:0;padding-right:0"><nav class="ComboboxNavbar_navbar__dBZ3C" data-hidden="true"><div class="ComboboxNavbar_search__i7Dsw m-46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="md"><div style="--input-height:var(--input-height-md);--input-fz:var(--mantine-font-size-md);--input-radius:var(--mantine-radius-md)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="md" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-TextInput-section"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="ComboboxNavbar_searchIcon__RxkMY"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></div><input class="ComboboxNavbar_searchInput__r17UY m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Ctrl + Shift + K to search" aria-invalid="false" id="mantine-R2ulu6" value=""/></div></div><div style="--scrollarea-scrollbar-size:calc(0.375rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="ComboboxNavbar_scroll__nhvxA m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Select</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=BasicSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive select component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectActive"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with active option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Active option is marked in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SearchableSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectLimit"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with options limit</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>100 000 options searchable select</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectOptionComponent"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with custom option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with custom option and value component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectAsync"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with async data</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Data is requested only when the dropdown is opened</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectClearable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with clear button</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Clearable select</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectDropdownSearch"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search in dropdown</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search input in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectOptionOnHover"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select option on hover</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Move selection to hovered option</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectGroups"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Options groups</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with options groups</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectGroupsSearchable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable select with groups</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Options filtering with grouped data</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectGroupsStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom group styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Customize groups styles with Styles API</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectCreatable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Creatable select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with option to create new options</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Autocomplete</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=BasicAutocomplete"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive autocomplete component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AutocompleteLimit"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with options limit</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>100 000 options search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AsyncAutocomplete"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Async autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with async data</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AutocompleteHighlight"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with highlight</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with highlighted search query in options</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AutocompleteSelectFirstOption"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select first option on type</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with first option selected when user types</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AutocompleteDynamic"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dynamic options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with options that depend on the user input</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=AutocompleteClearable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Clearable autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with clear button</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Multiselect</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=BasicMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive multiselect component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SearchableMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=MaxSelectedItems"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Max selected options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Limit max number of options that can be selected</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=MultiSelectCheckbox"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with checkboxes</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect options with checkboxes</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=ActiveOptionsFilter"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Hide active options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Remove active options from the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=MaxDisplayedItems"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Max displayed values</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Limit max number of values that can be displayed</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=MultiSelectValueRenderer"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom value pills</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Use a custom component to render selected values</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=MultiSelectCreatable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Creatable multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with option to create new options</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Button</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=BasicButton"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic button</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive combobox with button target</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=ButtonSearch"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with search in dropdown</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with search input in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=ButtonMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button multi select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with multiple items selection</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Dropdown</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownScroll"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown scroll</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with native scrollbars</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownScrollArea"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea.Autosize scrollbars</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownHeader"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with header</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea and header</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownFooter"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with footer</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea and footer</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownPositionStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with custom styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Change dropdown styles with Styles API</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectedStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom selected styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Customize selected option styles</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Animations</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown animation</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with open/close animation</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownOptionsAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with option animation</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Play options animation on dropdown open</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectedAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Animate selected option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Play options animation on when option is selected</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=DropdownSmoothScroll"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Smooth scroll</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Smooth scroll of the options with keyboard navigation</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Other</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=SelectList"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Inline options list</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Inline list with checkboxes</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox?e=TransferList"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Transfer list</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Transfer list with search</span></p></a></div><p class="mantine-focus-auto ComboboxNavbar_empty__GLKO4 m-b6d8b162 mantine-Text-root">Nothing found...</p></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="ComboboxShell_main__7MsRS"></main></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/combobox","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a31c84cc8d06a9d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a31c84cc8d06a9d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/combobox-b7914902b2865404.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div class="ComboboxShell_root__2qhtZ"><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-Rimlu6-dropdown" id="mantine-Rimlu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><main class="Shell_main__lcVaI" id="mdx" style="padding-left:0;padding-right:0"><nav class="ComboboxNavbar_navbar__dBZ3C" data-hidden="true"><div class="ComboboxNavbar_search__i7Dsw m-46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-size="md"><div style="--input-height:var(--input-height-md);--input-fz:var(--mantine-font-size-md);--input-radius:var(--mantine-radius-md)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="md" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-TextInput-section"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="ComboboxNavbar_searchIcon__RxkMY"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></div><input class="ComboboxNavbar_searchInput__r17UY m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Ctrl + Shift + K to search" aria-invalid="false" id="mantine-R2ulu6" value=""/></div></div><div style="--scrollarea-scrollbar-size:calc(0.375rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="ComboboxNavbar_scroll__nhvxA m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Select</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=BasicSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive select component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectActive"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with active option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Active option is marked in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SearchableSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectLimit"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with options limit</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>100 000 options searchable select</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectOptionComponent"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with custom option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with custom option and value component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectAsync"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with async data</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Data is requested only when the dropdown is opened</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectClearable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with clear button</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Clearable select</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectDropdownSearch"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search in dropdown</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with search input in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectOptionOnHover"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select option on hover</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Move selection to hovered option</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectGroups"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Options groups</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with options groups</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectGroupsSearchable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable select with groups</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Options filtering with grouped data</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectGroupsStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom group styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Customize groups styles with Styles API</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectCreatable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Creatable select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select with option to create new options</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Autocomplete</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=BasicAutocomplete"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive autocomplete component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AutocompleteLimit"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with options limit</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>100 000 options search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AsyncAutocomplete"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Async autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with async data</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AutocompleteHighlight"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with highlight</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with highlighted search query in options</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AutocompleteSelectFirstOption"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Select first option on type</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with first option selected when user types</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AutocompleteDynamic"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dynamic options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with options that depend on the user input</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=AutocompleteClearable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Clearable autocomplete</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Autocomplete with clear button</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Multiselect</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=BasicMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive multiselect component</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SearchableMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Searchable multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with search</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=MaxSelectedItems"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Max selected options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Limit max number of options that can be selected</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=MultiSelectCheckbox"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with checkboxes</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect options with checkboxes</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=ActiveOptionsFilter"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Hide active options</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Remove active options from the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=MaxDisplayedItems"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Max displayed values</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Limit max number of values that can be displayed</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=MultiSelectValueRenderer"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom value pills</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Use a custom component to render selected values</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=MultiSelectCreatable"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Creatable multiselect</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Multiselect with option to create new options</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Button</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=BasicButton"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Basic button</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Primitive combobox with button target</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=ButtonSearch"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with search in dropdown</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with search input in the dropdown</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=ButtonMultiSelect"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button multi select</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Button with multiple items selection</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Dropdown</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownScroll"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown scroll</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with native scrollbars</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownScrollArea"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea.Autosize scrollbars</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownHeader"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with header</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea and header</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownFooter"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with footer</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with ScrollArea and footer</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownPositionStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with custom styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Change dropdown styles with Styles API</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectedStyles"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Custom selected styles</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Customize selected option styles</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Animations</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown animation</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with open/close animation</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownOptionsAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Dropdown with option animation</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Play options animation on dropdown open</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectedAnimation"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Animate selected option</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Play options animation on when option is selected</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=DropdownSmoothScroll"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Smooth scroll</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Smooth scroll of the options with keyboard navigation</span></p></a></div><div class="ComboboxLinksGroup_group___3DBD" data-opened="true"><button class="mantine-focus-auto ComboboxLinksGroup_header__NPwCf m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ComboboxLinksGroup_chevron__OCkV8"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto ComboboxLinksGroup_title__ct5WH m-b6d8b162 mantine-Text-root">Other</p></button><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=SelectList"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Inline options list</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Inline list with checkboxes</span></p></a><a class="ComboboxLinksGroup_link__V0x6U" href="/combobox/?e=TransferList"><p class="mantine-focus-auto ComboboxLinksGroup_linkTitle__Xz2H7 m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Transfer list</span></p><p class="mantine-focus-auto ComboboxLinksGroup_linkDescription__7H8lj m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>Transfer list with search</span></p></a></div><p class="mantine-focus-auto ComboboxNavbar_empty__GLKO4 m-b6d8b162 mantine-Text-root">Nothing found...</p></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="ComboboxShell_main__7MsRS"></main></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/combobox","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/contribute.html b/contribute/index.html
similarity index 75%
rename from contribute.html
rename to contribute/index.html
index dae194738d7..dd829b5db25 100644
--- a/contribute.html
+++ b/contribute/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/contribute-3ca7be664099b35c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Contributing to Mantine</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/contribute-3ca7be664099b35c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Contributing to Mantine</h1>
 <p class="MdxTypography_paragraph__Lp7wh">First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!</p>
 <div id="ways-to-contribute" data-heading="Ways to contribute" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#ways-to-contribute">Ways to contribute</a></h2>
 <ul class="MdxTypography_ul__pQ83b">
@@ -55,4 +55,4 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">docs:docgen</code> – generates components types information with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/scripts/docgen.ts">docgen script</a></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">docs:build</code> – builds docs for production</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">docs:deploy</code> – builds and deploys docs to the GitHub Pages</li>
-</ul></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/contribute","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/contribute","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/accordion.html b/core/accordion/index.html
similarity index 82%
rename from core/accordion.html
rename to core/accordion/index.html
index 0e13ca4f78a..e09e61adf00 100644
--- a/core/accordion.html
+++ b/core/accordion/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/8126-f58446ccde90abe6.js" defer=""></script><script src="/_next/static/chunks/pages/core/accordion-b4b99801acd7b315.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Accordion</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Divide content into collapsible sections</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Accordion</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Accordion/Accordion.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/accordion.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/8126-f58446ccde90abe6.js" defer=""></script><script src="/_next/static/chunks/pages/core/accordion-b4b99801acd7b315.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Accordion</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Divide content into collapsible sections</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Accordion</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Accordion/Accordion.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/accordion.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Data used in Accordion examples:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> groceries = [
   {
@@ -288,7 +288,7 @@
 }</code></pre></div></div></div></div>
 <div id="compose-controls" data-heading="Compose controls" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#compose-controls">Compose controls</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can add any additional elements that will be displayed next to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Accordion.Control</code>,
-for example, you can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/menu">Menu</a>:</p>
+for example, you can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/menu/">Menu</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class="m-9bdbb667 mantine-Accordion-root" data-variant="default" data-accordion="true"><div class="m-fe19b709 m-9bd7b098 mantine-Accordion-item"><div class="m-4451eb3a mantine-Center-root"><button class="mantine-focus-auto m-6939a5e9 m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="left" type="button" aria-expanded="false" aria-controls="mantine-Ramtdarblu6-panel-item-1" id="mantine-Ramtdarblu6-control-item-1"><span class="m-3f35ae96 mantine-Accordion-chevron" data-position="left"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Control 1</span></button><button style="--ai-size:var(--ai-size-lg);--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="lg" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots"><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></button></div><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="m-df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Ramtdarblu6-panel-item-1" aria-labelledby="mantine-Ramtdarblu6-control-item-1"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Panel 1</div></div></div></div><div class="m-fe19b709 m-9bd7b098 mantine-Accordion-item"><div class="m-4451eb3a mantine-Center-root"><button class="mantine-focus-auto m-6939a5e9 m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="left" type="button" aria-expanded="false" aria-controls="mantine-Ramtdarblu6-panel-item-2" id="mantine-Ramtdarblu6-control-item-2"><span class="m-3f35ae96 mantine-Accordion-chevron" data-position="left"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Control 2</span></button><button style="--ai-size:var(--ai-size-lg);--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="lg" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots"><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></button></div><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="m-df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Ramtdarblu6-panel-item-2" aria-labelledby="mantine-Ramtdarblu6-control-item-2"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Panel 2</div></div></div></div><div class="m-fe19b709 m-9bd7b098 mantine-Accordion-item"><div class="m-4451eb3a mantine-Center-root"><button class="mantine-focus-auto m-6939a5e9 m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="left" type="button" aria-expanded="false" aria-controls="mantine-Ramtdarblu6-panel-item-3" id="mantine-Ramtdarblu6-control-item-3"><span class="m-3f35ae96 mantine-Accordion-chevron" data-position="left"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Control 3</span></button><button style="--ai-size:var(--ai-size-lg);--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="lg" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots"><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></button></div><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="m-df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Ramtdarblu6-panel-item-3" aria-labelledby="mantine-Ramtdarblu6-control-item-3"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Panel 3</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Accordion</span>, <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">AccordionControlProps</span>, <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconDots</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -347,7 +347,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="unstyled-accordion" data-heading="Unstyled Accordion" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#unstyled-accordion">Unstyled Accordion</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop on Accordion component to remove all non-essential library styles.
-It can be used to style component with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> without overriding any styles.</p>
+It can be used to style component with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> without overriding any styles.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="mantine-Accordion-root" data-variant="default" data-accordion="true"><div class="mantine-Accordion-item"><button class="mantine-Accordion-control mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-Raoddarblu6-panel-Apples" id="mantine-Raoddarblu6-control-Apples"><span class="mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="mantine-Accordion-label">Apples</span><span class="mantine-Accordion-icon" data-chevron-position="right">🍎</span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Raoddarblu6-panel-Apples" aria-labelledby="mantine-Raoddarblu6-control-Apples"><div style="opacity:0;transition:opacity 200ms ease"><div class="mantine-Accordion-content">Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.</div></div></div></div><div class="mantine-Accordion-item"><button class="mantine-Accordion-control mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-Raoddarblu6-panel-Bananas" id="mantine-Raoddarblu6-control-Bananas"><span class="mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="mantine-Accordion-label">Bananas</span><span class="mantine-Accordion-icon" data-chevron-position="right">🍌</span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Raoddarblu6-panel-Bananas" aria-labelledby="mantine-Raoddarblu6-control-Bananas"><div style="opacity:0;transition:opacity 200ms ease"><div class="mantine-Accordion-content">Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.</div></div></div></div><div class="mantine-Accordion-item"><button class="mantine-Accordion-control mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-Raoddarblu6-panel-Broccoli" id="mantine-Raoddarblu6-control-Broccoli"><span class="mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="mantine-Accordion-label">Broccoli</span><span class="mantine-Accordion-icon" data-chevron-position="right">🥦</span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Raoddarblu6-panel-Broccoli" aria-labelledby="mantine-Raoddarblu6-control-Broccoli"><div style="opacity:0;transition:opacity 200ms ease"><div class="mantine-Accordion-content">Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Accordion</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -357,8 +357,8 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Accordion</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Accordion</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to customize Accordion styles:</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Accordion</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
+<p class="MdxTypography_paragraph__Lp7wh">Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to customize Accordion styles:</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -366,7 +366,7 @@
  * Hover over selectors to apply outline styles
  *
  */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to customize Accordion styles:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to customize Accordion styles:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(31.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-333cc5d1 m-9bdbb667 mantine-Accordion-root" data-variant="filled" data-accordion="true"><div class="m-2cdf939a m-3338c002 m-9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-expanded="true" aria-controls="mantine-Rapldarblu6-panel-Apples" id="mantine-Rapldarblu6-control-Apples"><span class="m-67366eec m-3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Apples</span><span class="m-9bd771fe mantine-Accordion-icon" data-chevron-position="right">🍎</span></button><div style="box-sizing:border-box" class="m-df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-Rapldarblu6-panel-Apples" aria-labelledby="mantine-Rapldarblu6-control-Apples"><div style="opacity:1;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.</div></div></div></div><div class="m-2cdf939a m-3338c002 m-9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-Rapldarblu6-panel-Bananas" id="mantine-Rapldarblu6-control-Bananas"><span class="m-67366eec m-3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Bananas</span><span class="m-9bd771fe mantine-Accordion-icon" data-chevron-position="right">🍌</span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="m-df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Rapldarblu6-panel-Bananas" aria-labelledby="mantine-Rapldarblu6-control-Bananas"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.</div></div></div></div><div class="m-2cdf939a m-3338c002 m-9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m-4ba585b8 mantine-Accordion-control m-87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-expanded="false" aria-controls="mantine-Rapldarblu6-panel-Broccoli" id="mantine-Rapldarblu6-control-Broccoli"><span class="m-67366eec m-3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m-df3ffa0f mantine-Accordion-label">Broccoli</span><span class="m-9bd771fe mantine-Accordion-icon" data-chevron-position="right">🥦</span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="m-df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-Rapldarblu6-panel-Broccoli" aria-labelledby="mantine-Rapldarblu6-control-Broccoli"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-4ba554d4 mantine-Accordion-content">Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Accordion</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -402,4 +402,4 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Accordion</span> <span class="hljs-attr">order</span>=<span class="hljs-string">{3}</span>&gt;</span>{/* ...items */}<span class="hljs-tag">&lt;/<span class="hljs-name">Accordion</span>&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Keyboard interactions:</p>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to next item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to previous item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to first item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to last item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Toggles focused item opened state</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tooltip</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/avatar"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Avatar</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/accordion","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to next item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to previous item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to first item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to last item</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Toggles focused item opened state</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tooltip/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tooltip</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/avatar/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Avatar</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/accordion","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/action-icon.html b/core/action-icon/index.html
similarity index 78%
rename from core/action-icon.html
rename to core/action-icon/index.html
index af0fe70d6b8..7ad93aa3849 100644
--- a/core/action-icon.html
+++ b/core/action-icon/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/action-icon-79b1c0fc510cafd4.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ActionIcon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Icon button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ActionIcon/ActionIcon.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/action-icon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/action-icon-79b1c0fc510cafd4.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ActionIcon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Icon button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ActionIcon/ActionIcon.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/action-icon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true" data-striped="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-md);--ai-radius:var(--mantine-radius-sm);--ai-bg:var(--mantine-color-blue-filled);--ai-hover:var(--mantine-color-blue-filled-hover);--ai-color:var(--mantine-color-white);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" data-size="md" type="button" aria-label="Settings"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-adjustments" style="width:70%;height:70%"><path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M6 4v4"></path><path d="M6 12v8"></path><path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M12 4v10"></path><path d="M12 18v2"></path><path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M18 4v1"></path><path d="M18 9v11"></path></svg></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rdkgddarblu6" id="mantine-Rdkgddarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rdkgddarblu6"><option value="default">Default</option><option value="filled" selected="">Filled</option><option value="light">Light</option><option value="outline">Outline</option><option value="subtle">Subtle</option><option value="transparent">Transparent</option><option value="white">White</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmlkgddarblu6-dropdown" id="mantine-Rtbmlkgddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R15kgddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconAdjustments</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -14,7 +14,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> styles.</p>
+<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> styles.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-xl);--ai-bg:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--ai-hover:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--ai-color:var(--mantine-color-white);--ai-bd:none" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xl" type="button" aria-label="Gradient action icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart"><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"></path></svg></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkgtdarblu6-label">Gradient from</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relrdkgtdarblu6-dropdown" id="mantine-Relrdkgtdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgtdarblu6-label">Gradient to</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relrlkgtdarblu6-dropdown" id="mantine-Relrlkgtdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgtdarblu6-label">Gradient degree</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="360" aria-valuemin="0" aria-valuenow="90"></div><div></div></div></div><input type="hidden" value="90"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -32,9 +32,9 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="size" data-heading="Size" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#size">Size</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can use any valid CSS value in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop, it is used to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">min-width</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">min-height</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code>
-properties. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop does not control child <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/icons">icon</a> size, you need to
+properties. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop does not control child <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/icons/">icon</a> size, you need to
 set it manually on icon component. When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> is a number, the value is treated as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">px</code> units and
-converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a> units.</p>
+converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a> units.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:calc(2.625rem * var(--mantine-scale));--ai-bg:var(--mantine-color-default);--ai-hover:var(--mantine-color-default-hover);--ai-color:var(--mantine-color-default-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="ActionIcon with size as a number"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart" style="width:calc(1.5rem * var(--mantine-scale));height:calc(1.5rem * var(--mantine-scale))"><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"></path></svg></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -94,7 +94,7 @@
 also when the button is disabled by the parent component (for example, when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code> prop is set on a
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;fieldset /&gt;</code> element which contains <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code>).</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">&amp;[data-disabled]</code> is used to style the button when it is not actually disabled but should look like
-it is (for example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> should be used if you need to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code>
+it is (for example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> should be used if you need to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code>
 or when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> is used as a link)</li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-xl)" class="mantine-focus-auto m-892ca4f5 m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-size="xl" data-disabled="true" type="button" aria-label="Disabled with styles" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart"><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"></path></svg></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.button</span> {
@@ -106,7 +106,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="disabled-button-with-tooltip" data-heading="Disabled button with Tooltip" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#disabled-button-with-tooltip">Disabled button with Tooltip</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">onMouseLeave</code> event <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/facebook/react/issues/18753">is not triggered</a> when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> is disabled, so if you need to use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> you need to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> prop on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> you need to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> prop on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code>
 instead of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code>. Note that it is also required to change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClick</code> event handler to
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">(event) =&gt; event.preventDefault()</code> as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> is not actually disabled and will still trigger
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClick</code> event.</p>
@@ -123,8 +123,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loading-state" data-heading="Loading state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loading-state">Loading state</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop is set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> will be disabled and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> with overlay will be rendered
-in the center of the button. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> color depends on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> variant.</p>
+<p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop is set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> will be disabled and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> with overlay will be rendered
+in the center of the button. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> color depends on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> variant.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-loading="true" type="button" aria-label="Filled loading" disabled=""><span style="--loader-size:calc(var(--ai-size) * 0.55);--loader-color:var(--ai-color)" class="m-b34414df m-302b9fb1 mantine-ActionIcon-loader m-5ae2e3c mantine-Loader-root"></span></button><button style="--ai-bg:var(--mantine-color-blue-light);--ai-hover:var(--mantine-color-blue-light-hover);--ai-color:var(--mantine-color-blue-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-loading="true" type="button" aria-label="Light loading" disabled=""><span style="--loader-size:calc(var(--ai-size) * 0.55);--loader-color:var(--ai-color)" class="m-b34414df m-302b9fb1 mantine-ActionIcon-loader m-5ae2e3c mantine-Loader-root"></span></button><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-blue-outline-hover);--ai-color:var(--mantine-color-blue-outline);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-loading="true" type="button" aria-label="Outline loading" disabled=""><span style="--loader-size:calc(var(--ai-size) * 0.55);--loader-color:var(--ai-color)" class="m-b34414df m-302b9fb1 mantine-ActionIcon-loader m-5ae2e3c mantine-Loader-root"></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -137,16 +137,16 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loader-props" data-heading="Loader props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loader-props">Loader props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can customize <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> prop, it accepts all props that
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component has:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can customize <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> prop, it accepts all props that
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component has:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-xl)" class="mantine-focus-auto m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-size="xl" data-loading="true" type="button" disabled=""><span style="--loader-size:calc(var(--ai-size) * 0.55);--loader-color:var(--ai-color)" class="m-4e3f22d7 m-302b9fb1 mantine-ActionIcon-loader m-5ae2e3c mantine-Loader-root"><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ActionIcon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;xl&quot;</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">loaderProps</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">type:</span> &#x27;<span class="hljs-attr">dots</span>&#x27; }} /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="add-custom-variants" data-heading="Add custom variants" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#add-custom-variants">Add custom variants</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> variants, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes">data-variant</a> attribute.
-Usually new variants are added on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>, this way they are
+<p class="MdxTypography_paragraph__Lp7wh">To add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> variants, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes/">data-variant</a> attribute.
+Usually new variants are added on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>, this way they are
 available in all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> components in your application.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--ai-size:var(--ai-size-xl)" class="mantine-focus-auto mantine-active m-6f3d7427 m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="danger" data-size="xl" type="button" aria-label="Danger variant"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart"><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"></path></svg></button><button style="--ai-size:var(--ai-size-xl)" class="mantine-focus-auto mantine-active m-6f3d7427 m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="primary" data-size="xl" type="button" aria-label="Primary variant"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart"><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"></path></svg></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
@@ -216,7 +216,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon.Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ActionIcon</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
@@ -228,7 +228,7 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ActionIconProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyActionIconProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ActionIconProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ActionIconProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ActionIconProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="get-element-ref" data-heading="Get element ref" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-element-ref">Get element ref</a></h2><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -238,7 +238,7 @@
 }</code></pre></div></div></div></div>
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ActionIcon</code> accessible for screen readers, you need to either set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-label</code> or
-use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> component:</p>
+use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> component:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -255,4 +255,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tags-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TagsInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/button"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Button</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/action-icon","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tags-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TagsInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/button/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Button</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/action-icon","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/affix.html b/core/affix.html
deleted file mode 100644
index 95de5b87adb..00000000000
--- a/core/affix.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Affix | Mantine</title><meta name="description" content="Renders children inside portal at fixed position"/><meta name="og:title" content="Affix | Mantine"/><meta name="og:description" content="Renders children inside portal at fixed position"/><meta name="twitter:title" content="Affix | Mantine"/><meta name="twitter:description" content="Renders children inside portal at fixed position"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/affix-d13994f8b19d8be5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Affix</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders children inside portal at fixed position</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Affix</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Affix/Affix.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/affix.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Affix</code> renders a div element with a fixed position inside the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal">Portal</a> component.
-Use it to display elements fixed at any position on the screen, for example, scroll to top button:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Affix is located at the bottom of the screen, scroll to see it</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconArrowUp</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
-<span class="hljs-keyword">import</span> { useWindowScroll } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Affix</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Transition</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> [scroll, scrollTo] = <span class="hljs-title function_">useWindowScroll</span>();
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">ta</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>Affix is located at the bottom of the screen, scroll to see it<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Affix</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">bottom:</span> <span class="hljs-attr">20</span>, <span class="hljs-attr">right:</span> <span class="hljs-attr">20</span> }}&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">Transition</span> <span class="hljs-attr">transition</span>=<span class="hljs-string">&quot;slide-up&quot;</span> <span class="hljs-attr">mounted</span>=<span class="hljs-string">{scroll.y</span> &gt;</span> 0}&gt;
-          {(transitionStyles) =&gt; (
-            <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>
-              <span class="hljs-attr">leftSection</span>=<span class="hljs-string">{</span>&lt;<span class="hljs-attr">IconArrowUp</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">width:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">16</span>), <span class="hljs-attr">height:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">16</span>) }} /&gt;</span>}
-              style={transitionStyles}
-              onClick={() =&gt; scrollTo({ y: 0 })}
-            &gt;
-              Scroll to top
-            <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-          )}
-        <span class="hljs-tag">&lt;/<span class="hljs-name">Transition</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">Affix</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/skeleton"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Skeleton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/dialog"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dialog</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/affix","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/affix/index.html b/core/affix/index.html
new file mode 100644
index 00000000000..65322f7b272
--- /dev/null
+++ b/core/affix/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Affix | Mantine</title><meta name="description" content="Renders children inside portal at fixed position"/><meta name="og:title" content="Affix | Mantine"/><meta name="og:description" content="Renders children inside portal at fixed position"/><meta name="twitter:title" content="Affix | Mantine"/><meta name="twitter:description" content="Renders children inside portal at fixed position"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/affix-d13994f8b19d8be5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Affix</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders children inside portal at fixed position</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Affix</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Affix/Affix.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/affix.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Affix</code> renders a div element with a fixed position inside the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal/">Portal</a> component.
+Use it to display elements fixed at any position on the screen, for example, scroll to top button:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Affix is located at the bottom of the screen, scroll to see it</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconArrowUp</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
+<span class="hljs-keyword">import</span> { useWindowScroll } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Affix</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Transition</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> [scroll, scrollTo] = <span class="hljs-title function_">useWindowScroll</span>();
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">ta</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>Affix is located at the bottom of the screen, scroll to see it<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Affix</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">bottom:</span> <span class="hljs-attr">20</span>, <span class="hljs-attr">right:</span> <span class="hljs-attr">20</span> }}&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">Transition</span> <span class="hljs-attr">transition</span>=<span class="hljs-string">&quot;slide-up&quot;</span> <span class="hljs-attr">mounted</span>=<span class="hljs-string">{scroll.y</span> &gt;</span> 0}&gt;
+          {(transitionStyles) =&gt; (
+            <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>
+              <span class="hljs-attr">leftSection</span>=<span class="hljs-string">{</span>&lt;<span class="hljs-attr">IconArrowUp</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">width:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">16</span>), <span class="hljs-attr">height:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">16</span>) }} /&gt;</span>}
+              style={transitionStyles}
+              onClick={() =&gt; scrollTo({ y: 0 })}
+            &gt;
+              Scroll to top
+            <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
+          )}
+        <span class="hljs-tag">&lt;/<span class="hljs-name">Transition</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">Affix</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/skeleton/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Skeleton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/dialog/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dialog</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/affix","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/alert.html b/core/alert/index.html
similarity index 60%
rename from core/alert.html
rename to core/alert/index.html
index 63a5b9882b9..eb7299245d0 100644
--- a/core/alert.html
+++ b/core/alert/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/alert-cd9141c6f299bea6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Alert</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Attract user attention with important static message</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Alert</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Alert/Alert.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/alert.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/alert-cd9141c6f299bea6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Alert</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Attract user attention with important static message</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Alert</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Alert/Alert.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/alert.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true" data-striped="true"><div class="m-ad8eb9d6"><div style="--alert-radius:var(--mantine-radius-sm);--alert-bg:var(--mantine-color-blue-light);--alert-color:var(--mantine-color-blue-light-color);--alert-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-66836ed3 mantine-Alert-root" data-variant="light" id="mantine-R5addarblu6" role="alert" aria-describedby="mantine-R5addarblu6-body" aria-labelledby="mantine-R5addarblu6-title"><div class="m-a5d60502 mantine-Alert-wrapper"><div class="m-667f2a6a mantine-Alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-info-circle"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></div><div class="m-667c2793 mantine-Alert-body"><div class="m-6a03f287 mantine-Alert-title"><span id="mantine-R5addarblu6-title" class="m-698f4f23 mantine-Alert-label">Alert title</span></div><div id="mantine-R5addarblu6-body" class="m-7fa78076 mantine-Alert-message">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At officiis, quae tempore necessitatibus placeat saepe.</div></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R1middarblu6" id="mantine-R1middarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R1middarblu6"><option value="filled">Filled</option><option value="light" selected="">Light</option><option value="outline">Outline</option><option value="transparent">Transparent</option><option value="white">White</option><option value="default">Default</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2middarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R3leqmiddarblu6-dropdown" id="mantine-R3leqmiddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3middarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R4middarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R4middarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R4middarblu6">With close button</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R5middarblu6" id="mantine-R5middarblu6-label">Title</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R5middarblu6" value="Alert title"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R6middarblu6" id="mantine-R6middarblu6-label">Children</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R6middarblu6" value="Lorem ipsum dolor sit, amet consectetur adipisicing elit. At officiis, quae tempore necessitatibus placeat saepe."/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Alert</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconInfoCircle</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -15,7 +15,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Alert</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Alert</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Alert</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -44,4 +44,4 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">AlsoValid</span>(<span class="hljs-params"></span>) {
   <span class="hljs-comment">// -&gt; ok, without close button, closeButtonLabel is not needed</span>
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Alert</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tabs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tabs</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loader"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Loader</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/alert","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tabs/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tabs</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loader/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Loader</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/alert","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/anchor.html b/core/anchor/index.html
similarity index 56%
rename from core/anchor.html
rename to core/anchor/index.html
index a0fe1afb7fc..beb07afc44a 100644
--- a/core/anchor.html
+++ b/core/anchor/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/anchor-82e9b620f59b11b8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Anchor</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display link with theme styles</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Anchor/Anchor.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/anchor.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/anchor-82e9b620f59b11b8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Anchor</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display link with theme styles</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Anchor/Anchor.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/anchor.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><a class="mantine-focus-auto m-849cf0da m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://mantine.dev/" target="_blank">Anchor component</a></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -37,7 +37,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">You can also configure <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code> prop for all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Anchor</code> components with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can also configure <code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code> prop for all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Anchor</code> components with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span>, createTheme, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -57,7 +57,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Anchor</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Anchor</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Anchor</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
@@ -69,11 +69,11 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Anchor<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">AnchorProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyAnchorProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">AnchorProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">AnchorProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">AnchorProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="get-element-ref" data-heading="Get element ref" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-element-ref">Get element ref</a></h2><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> ref = useRef&lt;<span class="hljs-title class_">HTMLAnchorElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Anchor</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/unstyled-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">UnstyledButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/breadcrumbs"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Breadcrumbs</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/anchor","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/unstyled-button/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">UnstyledButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/breadcrumbs/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Breadcrumbs</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/anchor","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/app-shell.html b/core/app-shell/index.html
similarity index 66%
rename from core/app-shell.html
rename to core/app-shell/index.html
index b6707890235..486dc7fa083 100644
--- a/core/app-shell.html
+++ b/core/app-shell/index.html
@@ -3,15 +3,15 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/app-shell-75db0286f5916356.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">AppShell</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive shell for your application with header, navbar, aside and footer</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/AppShell/AppShell.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/app-shell.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="examples" data-heading="Examples" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#examples">Examples</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/app-shell-75db0286f5916356.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">AppShell</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive shell for your application with header, navbar, aside and footer</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/AppShell/AppShell.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/app-shell.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="examples" data-heading="Examples" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#examples">Examples</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">This page includes only documentation. Since all associated <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> components have fixed
 position, it is not possible to include demos on this page. You can find 10+ examples on
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=BasicAppShell">this page</a></p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=BasicAppShell">this page</a></p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> is a layout component. It can be used to implement a common Header – Navbar – Footer – Aside
 layout pattern. All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell</code> components have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position: fixed</code> style – they are not scrolled with
 the page.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=BasicAppShell">Basic AppShell example</a> with header and navbar.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=BasicAppShell">Basic AppShell example</a> with header and navbar.
 Navbar is hidden on mobile by default and toggled with the burger button.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span>, <span class="hljs-title class_">Burger</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -75,16 +75,16 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">layout</code> prop controls how <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code>
 are positioned relative to each other. It accepts <code class="m-b183c0a2 mantine-Code-root" dir="ltr">alt</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">default</code> values:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">alt</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> height is equal to viewport height, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> width is equal to viewport width - <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> width (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=AltLayout">example</a>)</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">default</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> height is equal to viewport height - <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> height, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> width is equal to viewport width (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=FullLayout">example</a>)</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">alt</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> height is equal to viewport height, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> width is equal to viewport width - <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> width (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=AltLayout">example</a>)</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">default</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> height is equal to viewport height - <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> height, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> width is equal to viewport width (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=FullLayout">example</a>)</li>
 </ul>
 <div id="height-configuration" data-heading="Height configuration" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#height-configuration">Height configuration</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> property in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">header</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">footer</code> configuration objects works the following way:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">If you pass a number, the value will be converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a> and used as
+<li class="MdxTypography_li__JpNrx">If you pass a number, the value will be converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a> and used as
 height at all viewport sizes.</li>
 <li class="MdxTypography_li__JpNrx">To change height based on viewport width, use object with breakpoints as keys and height as
-values. It works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props#responsive-styles">style props</a>.</li>
+values. It works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/#responsive-styles">style props</a>.</li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">Examples:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -114,10 +114,10 @@
 <div id="width-configuration" data-heading="Width configuration" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#width-configuration">Width configuration</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> property in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">navbar</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aside</code> configuration objects works the following way:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">If you pass a number, the value will be converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a> and used as
+<li class="MdxTypography_li__JpNrx">If you pass a number, the value will be converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a> and used as
 width when the viewport is larger than <code class="m-b183c0a2 mantine-Code-root" dir="ltr">breakpoint</code>.</li>
 <li class="MdxTypography_li__JpNrx">To change width based on viewport width, use object with breakpoints as keys and width as
-values. It works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props#responsive-styles">style props</a>.
+values. It works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/#responsive-styles">style props</a>.
 Note that width is always 100% when the viewport is smaller than <code class="m-b183c0a2 mantine-Code-root" dir="ltr">breakpoint</code>.</li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">Examples:</p>
@@ -149,7 +149,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code> prop controls the padding of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> component. It is important to use it
 instead of setting padding on the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> directly because padding of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> is
 also used to offset <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Navbar</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> components.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code> prop works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props#responsive-styles">style props</a> and
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code> prop works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/#responsive-styles">style props</a> and
 accepts numbers, strings and objects with breakpoints as keys and padding as values. You can
 reference <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code> values or use any valid CSS values.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -170,7 +170,7 @@
 <div id="header-offset-configuration" data-heading="Header offset configuration" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#header-offset-configuration">Header offset configuration</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">header</code> prop has <code class="m-b183c0a2 mantine-Code-root" dir="ltr">offset</code> property which allows removing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code> offset from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> component.
 It is useful when you want to collapse <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Header</code> based on the scroll position. For example, you can use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-headroom">use-headroom</a> hook to collapse header when user scrolls down and expand it when user scrolls up (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=Headroom">example</a>).</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-headroom/">use-headroom</a> hook to collapse header when user scrolls down and expand it when user scrolls up (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=Headroom">example</a>).</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useHeadroom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -191,7 +191,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">navbar</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aside</code> props have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">collapsed</code> property. The property accepts an object
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{ mobile: boolean; desktop: boolean }</code> which allows to configure collapsed state
 depending on the viewport width.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell?e=CollapseDesktop">Example</a> with separate collapsed state for mobile and desktop:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/app-shell/?e=CollapseDesktop">Example</a> with separate collapsed state for mobile and desktop:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">AppShell</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -298,4 +298,4 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Aside</code> root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aside</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Footer</code> root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">footer</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">main</code> – <strong>!important:</strong> do not use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">main</code> element inside <code class="m-b183c0a2 mantine-Code-root" dir="ltr">AppShell.Main</code> component</li>
-</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/recipes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Recipes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/aspect-ratio"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AspectRatio</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/app-shell","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/recipes/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Recipes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/aspect-ratio/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AspectRatio</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/app-shell","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/aspect-ratio.html b/core/aspect-ratio/index.html
similarity index 53%
rename from core/aspect-ratio.html
rename to core/aspect-ratio/index.html
index ba4ed2999b8..b73d4e35235 100644
--- a/core/aspect-ratio.html
+++ b/core/aspect-ratio/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/aspect-ratio-3e67a35da570053e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">AspectRatio</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Maintain responsive consistent width/height ratio</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AspectRatio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/AspectRatio/AspectRatio.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/aspect-ratio.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/aspect-ratio-3e67a35da570053e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">AspectRatio</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Maintain responsive consistent width/height ratio</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AspectRatio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/AspectRatio/AspectRatio.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/aspect-ratio.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">AspectRatio</code> allows maintaining a consistent width/height ratio.
 It can be used to display images, maps, videos and other media.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--ar-ratio:0.6666666666666666;margin-right:auto;margin-left:auto;max-width:calc(18.75rem * var(--mantine-scale))" class="m-71ac47fc mantine-AspectRatio-root"><img src="https://images.unsplash.com/photo-1527118732049-c88155f2107c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" alt="Panda"/></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">AspectRatio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -47,4 +47,4 @@
       /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">AspectRatio</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/app-shell"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AppShell</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/center"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Center</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/aspect-ratio","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/app-shell/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AppShell</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/center/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Center</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/aspect-ratio","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/autocomplete.html b/core/autocomplete/index.html
similarity index 75%
rename from core/autocomplete.html
rename to core/autocomplete/index.html
index a0fa909e9f9..6431536b7c1 100644
--- a/core/autocomplete.html
+++ b/core/autocomplete/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/core/autocomplete-086087a4f31b1274.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Autocomplete</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Autocomplete user input with any list of options</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Autocomplete/Autocomplete.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/autocomplete.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a>. You can find examples of custom <!-- -->autocomplete<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">the examples page</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/core/autocomplete-086087a4f31b1274.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Autocomplete</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Autocomplete user input with any list of options</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Autocomplete/Autocomplete.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/autocomplete.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a>. You can find examples of custom <!-- -->autocomplete<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">the examples page</a>.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> provides user a list of suggestions based on the input,
 however user is not limited to suggestions and can type anything.</p>
@@ -106,10 +106,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="scrollable-dropdown" data-heading="Scrollable dropdown" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-dropdown">Scrollable dropdown</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea.Autosize</a>.
+<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea.Autosize</a>.
 You can control dropdown max-height with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxDropdownHeight</code> prop if you do not change the default settings.</p>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to use native scrollbars, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withScrollArea={false}</code>. Note that in this case,
-you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Autocomplete-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Autocomplete-label" for="mantine-Rqkldarblu6" id="mantine-Rqkldarblu6-label">With scroll area (default)</label><div class="m-6c018570 mantine-Input-wrapper mantine-Autocomplete-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-Autocomplete-input" data-variant="default" placeholder="Pick value or enter anything" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rqkldarblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-Autocomplete-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Autocomplete-label" for="mantine-R1akldarblu6" id="mantine-R1akldarblu6-label">With native scroll</label><div class="m-6c018570 mantine-Input-wrapper mantine-Autocomplete-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-Autocomplete-input" data-variant="default" placeholder="Pick value or enter anything" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R1akldarblu6" value=""/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">Array</span>(<span class="hljs-number">100</span>)
@@ -170,13 +170,13 @@
     /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Autocomplete</span> <span class="hljs-attr">comboboxProps</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">withinPortal:</span> <span class="hljs-attr">false</span> }} <span class="hljs-attr">data</span>=<span class="hljs-string">{[]}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Autocomplete-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-Autocomplete-label" data-variant="default" data-size="sm" for="mantine-R1amtdarblu6" id="mantine-R1amtdarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-Autocomplete-description" data-variant="default" data-size="sm" id="mantine-R1amtdarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-Autocomplete-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-Autocomplete-input" data-variant="default" placeholder="Autocomplete placeholder" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" aria-describedby="mantine-R1amtdarblu6-description" id="mantine-R1amtdarblu6" value=""/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkmtdarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkmtdarblu6" id="mantine-R3mdkmtdarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkmtdarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkmtdarblu6" id="mantine-R3mdkmtdarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkmtdarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkmtdarblu6" id="mantine-R3mdkmtdarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkmtdarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkmtdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkmtdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kmtdarblu6" id="mantine-R15kmtdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kmtdarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkmtdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkmtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkmtdarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkmtdarblu6" id="mantine-R1lkmtdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkmtdarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkmtdarblu6" id="mantine-R1tkmtdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkmtdarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Autocomplete</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -241,7 +241,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Autocomplete</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -271,4 +271,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Autocomplete</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TextInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/combobox"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Combobox</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/autocomplete","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TextInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/combobox/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Combobox</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/autocomplete","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/avatar.html b/core/avatar/index.html
similarity index 71%
rename from core/avatar.html
rename to core/avatar/index.html
index b5b969f8bff..1afa57db00b 100644
--- a/core/avatar.html
+++ b/core/avatar/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/avatar-cd30a65e8ae692b1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Avatar</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display user profile image, initials or fallback icon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Avatar/Avatar.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/avatar.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/avatar-cd30a65e8ae692b1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Avatar</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display user profile image, initials or fallback icon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Avatar/Avatar.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/avatar.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div class="m-f85678b6 mantine-Avatar-root"><img class="m-11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/10353856?s=460&amp;u=88394dfd67727327c1f7670a1764dc38a8a24831&amp;v=4" alt="it&#x27;s me"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root"><span class="m-104cd71f mantine-Avatar-placeholder"><svg data-avatar-placeholder-icon="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></div><div style="--avatar-radius:var(--mantine-radius-xl);--avatar-bg:var(--mantine-color-cyan-light);--avatar-color:var(--mantine-color-cyan-light-color);--avatar-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-f85678b6 mantine-Avatar-root"><span class="m-104cd71f mantine-Avatar-placeholder">MK</span></div><div style="--avatar-radius:var(--mantine-radius-sm);--avatar-bg:var(--mantine-color-blue-light);--avatar-color:var(--mantine-color-blue-light-color);--avatar-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-f85678b6 mantine-Avatar-root"><span class="m-104cd71f mantine-Avatar-placeholder"><svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-star"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></span></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconStar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -73,7 +73,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Note that you must not wrap child <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Avatar</code> components with any additional elements,
 but you can use wrap <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Avatar</code> with components that do not render any HTML elements
-in the current tree, for example <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a>.</p>
+in the current tree, for example <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-comment">// Will not work correctly</span>
@@ -89,7 +89,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Avatar.Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Example of usage with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of usage with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--ag-spacing:var(--mantine-spacing-sm)" class="m-11def92b mantine-AvatarGroup-group"><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/10353856?s=460&amp;u=88394dfd67727327c1f7670a1764dc38a8a24831&amp;v=4"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=250&amp;q=80"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=255&amp;q=80"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><span class="m-104cd71f mantine-Avatar-placeholder">+2</span></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span>, <span class="hljs-title class_">Tooltip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -120,7 +120,7 @@
     &lt;/<span class="hljs-title class_">Tooltip</span>.<span class="hljs-property">Group</span>&gt;
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Avatar</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Avatar</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
@@ -132,7 +132,7 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Avatar<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">AvatarProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyAvatarProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">AvatarProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">AvatarProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">AvatarProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><a class="m-f85678b6 mantine-Avatar-root" href="https://github.com/rtivital" target="_blank"><img class="m-11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/10353856?s=460&amp;u=88394dfd67727327c1f7670a1764dc38a8a24831&amp;v=4" alt="it&#x27;s me"/></a></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -146,7 +146,7 @@
     /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">You can combine it with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a> to show additional information on hover</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can combine it with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a> to show additional information on hover</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--ag-spacing:var(--mantine-spacing-sm)" class="m-11def92b mantine-AvatarGroup-group"><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://avatars.githubusercontent.com/u/10353856?s=460&amp;u=88394dfd67727327c1f7670a1764dc38a8a24831&amp;v=4"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=250&amp;q=80"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><img class="m-11f8ac07 mantine-Avatar-image" src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=255&amp;q=80"/></div><div style="--avatar-radius:var(--mantine-radius-xl)" class="m-f85678b6 mantine-Avatar-root" data-within-group="true"><span class="m-104cd71f mantine-Avatar-placeholder">+2</span></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Avatar</span>, <span class="hljs-title class_">Tooltip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -200,4 +200,4 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">OkPlaceholder</span>(<span class="hljs-params"></span>) {
   <span class="hljs-comment">// Ok, title is set on placeholder</span>
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Rob Johnson&quot;</span>&gt;</span>RJ<span class="hljs-tag">&lt;/<span class="hljs-name">Avatar</span>&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/accordion"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Accordion</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/background-image"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">BackgroundImage</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/avatar","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/accordion/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Accordion</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/background-image/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">BackgroundImage</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/avatar","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/background-image.html b/core/background-image/index.html
similarity index 50%
rename from core/background-image.html
rename to core/background-image/index.html
index 8c6716e7d05..33b9676c5ab 100644
--- a/core/background-image.html
+++ b/core/background-image/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/background-image-ba0f458efeb0b6aa.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">BackgroundImage</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Displays image as background</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">BackgroundImage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/BackgroundImage/BackgroundImage.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/background-image.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/background-image-ba0f458efeb0b6aa.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">BackgroundImage</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Displays image as background</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">BackgroundImage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/BackgroundImage/BackgroundImage.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/background-image.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(18.75rem * var(--mantine-scale))" class=""><div style="--bi-radius:var(--mantine-radius-sm);background-image:url(https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80)" class="m-2ce0de02 mantine-BackgroundImage-root"><div style="padding:var(--mantine-spacing-md)" class="m-4451eb3a mantine-Center-root"><p style="color:var(--mantine-color-white)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections</p></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rr9ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">BackgroundImage</span>, <span class="hljs-title class_">Center</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -23,11 +23,11 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">BackgroundImage</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">BackgroundImage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">BackgroundImage</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">BackgroundImage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">BackgroundImage</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">BackgroundImage<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">BackgroundImageProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyBackgroundImageProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">BackgroundImageProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">BackgroundImageProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Avatar</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/badge"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Badge</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/background-image","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">BackgroundImageProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/avatar/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Avatar</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/badge/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Badge</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/background-image","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/badge.html b/core/badge/index.html
similarity index 68%
rename from core/badge.html
rename to core/badge/index.html
index bac812ca62c..a4058f374d4 100644
--- a/core/badge.html
+++ b/core/badge/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/badge-235a857d9f52bf11.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Badge</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display badge, pill or tag</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Badge/Badge.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/badge.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/badge-235a857d9f52bf11.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Badge</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display badge, pill or tag</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Badge/Badge.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/badge.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--badge-height:var(--badge-height-md);--badge-padding-x:var(--badge-padding-x-md);--badge-fz:var(--badge-fz-md);--badge-radius:var(--mantine-radius-xl);--badge-bg:var(--mantine-color-blue-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="filled" data-size="md"><span class="m-5add502a mantine-Badge-label">Badge</span></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R3d4ddarblu6" id="mantine-R3d4ddarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R3d4ddarblu6"><option value="filled" selected="">Filled</option><option value="light">Light</option><option value="outline">Outline</option><option value="dot">Dot</option><option value="transparent">Transparent</option><option value="default">Default</option><option value="white">White</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atld4ddarblu6-dropdown" id="mantine-R7atld4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R9d4ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(100% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:100%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="100"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Badge</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;blue&quot;</span>&gt;</span>Badge<span class="hljs-tag">&lt;/<span class="hljs-name">Badge</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> styles.</p>
+<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> styles.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--badge-height:var(--badge-height-xl);--badge-padding-x:var(--badge-padding-x-xl);--badge-fz:var(--badge-fz-xl);--badge-bg:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--badge-color:var(--mantine-color-white);--badge-bd:none" class="m-347db0ec mantine-Badge-root" data-variant="gradient" data-size="xl"><span class="m-5add502a mantine-Badge-label">Gradient badge</span></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4tdarblu6-label">Gradient from</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R3lerd4tdarblu6-dropdown" id="mantine-R3lerd4tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4tdarblu6-label">Gradient to</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R3letd4tdarblu6-dropdown" id="mantine-R3letd4tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4tdarblu6-label">Gradient degree</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="360" aria-valuemin="0" aria-valuenow="90"></div><div></div></div></div><input type="hidden" value="90"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -43,7 +43,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Badge</span> <span class="hljs-attr">fullWidth</span>&gt;</span>Full width badge<span class="hljs-tag">&lt;/<span class="hljs-name">Badge</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -51,7 +51,7 @@
  * Hover over selectors to apply outline styles
  *
  */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Badge</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
@@ -63,4 +63,4 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Badge<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">BadgeProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyBadgeProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">BadgeProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">BadgeProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/background-image"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">BackgroundImage</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/card"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Card</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/badge","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">BadgeProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/background-image/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">BackgroundImage</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/card/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Card</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/badge","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/blockquote.html b/core/blockquote/index.html
similarity index 52%
rename from core/blockquote.html
rename to core/blockquote/index.html
index 514457cfc94..8e1bb49ece4 100644
--- a/core/blockquote.html
+++ b/core/blockquote/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/blockquote-3452a869af889766.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Blockquote</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Blockquote with optional cite</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Blockquote</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Blockquote/Blockquote.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/blockquote.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/blockquote-3452a869af889766.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Blockquote</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Blockquote with optional cite</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Blockquote</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Blockquote/Blockquote.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/blockquote.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(23.75rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><blockquote style="--bq-bg-light:rgba(34, 139, 230, 0.07);--bq-bg-dark:rgba(25, 113, 194, 0.06);--bq-bd:var(--mantine-color-blue-filled);--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-sm);margin-top:var(--mantine-spacing-xl)" class="m-ddec01c0 mantine-Blockquote-root" color="blue" radius="sm"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-info-circle"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span>Life is like an npm install – you never know what you are going to get.<cite class="m-dde51a35 mantine-Blockquote-cite">– Forrest Gump</cite></blockquote></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdktdarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relrdktdarblu6-dropdown" id="mantine-Relrdktdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlktdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtktdarblu6-label">Icon size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(60% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:60%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="60" aria-valuemin="30" aria-valuenow="48"></div><div></div></div></div><input type="hidden" value="48"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Blockquote</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconInfoCircle</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -14,4 +14,4 @@
       Life is like an npm install – you never know what you are going to get.
     <span class="hljs-tag">&lt;/<span class="hljs-name">Blockquote</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/timeline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Timeline</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/code"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Code</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/blockquote","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/timeline/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Timeline</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/code/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Code</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/blockquote","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/box.html b/core/box.html
deleted file mode 100644
index b54c5615582..00000000000
--- a/core/box.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Box | Mantine</title><meta name="description" content="Base component for all Mantine components"/><meta name="og:title" content="Box | Mantine"/><meta name="og:description" content="Base component for all Mantine components"/><meta name="twitter:title" content="Box | Mantine"/><meta name="twitter:description" content="Base component for all Mantine components"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/box-8ea1344bcce0d016.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Box</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for all Mantine components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Box/Box.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> component is used as a base for all other components. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> supports the following features:</p>
-<ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">component prop</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style">style prop</a></li>
-</ul>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> as a base for your own components or as a replacement for HTML elements:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">bg</span>=<span class="hljs-string">&quot;red.5&quot;</span> <span class="hljs-attr">my</span>=<span class="hljs-string">&quot;xl&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>
-      My component
-    <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/typography-styles-provider"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TypographyStylesProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/collapse"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Collapse</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/box","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/box/index.html b/core/box/index.html
new file mode 100644
index 00000000000..b7a89b5d454
--- /dev/null
+++ b/core/box/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Box | Mantine</title><meta name="description" content="Base component for all Mantine components"/><meta name="og:title" content="Box | Mantine"/><meta name="og:description" content="Base component for all Mantine components"/><meta name="twitter:title" content="Box | Mantine"/><meta name="twitter:description" content="Base component for all Mantine components"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/box-8ea1344bcce0d016.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Box</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for all Mantine components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Box/Box.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> component is used as a base for all other components. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> supports the following features:</p>
+<ul class="MdxTypography_ul__pQ83b">
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">component prop</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style/">style prop</a></li>
+</ul>
+<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Box</code> as a base for your own components or as a replacement for HTML elements:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">bg</span>=<span class="hljs-string">&quot;red.5&quot;</span> <span class="hljs-attr">my</span>=<span class="hljs-string">&quot;xl&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>
+      My component
+    <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
+  );
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/typography-styles-provider/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TypographyStylesProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/collapse/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Collapse</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/box","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/breadcrumbs.html b/core/breadcrumbs.html
deleted file mode 100644
index b33f3732f25..00000000000
--- a/core/breadcrumbs.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Breadcrumbs | Mantine</title><meta name="description" content="Separates list of react nodes with given separator"/><meta name="og:title" content="Breadcrumbs | Mantine"/><meta name="og:description" content="Separates list of react nodes with given separator"/><meta name="twitter:title" content="Breadcrumbs | Mantine"/><meta name="twitter:description" content="Separates list of react nodes with given separator"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/breadcrumbs-d772d03e29259639.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Breadcrumbs</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Separates list of react nodes with given separator</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Breadcrumbs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Breadcrumbs/Breadcrumbs.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/breadcrumbs.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Breadcrumbs</code> component accepts any number of React nodes as children
-and adds a given separator (defaults to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">/</code>) between them:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-8b3717df mantine-Breadcrumbs-root"><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://mantine.dev">Mantine</a><div class="m-3b8f2208 mantine-Breadcrumbs-separator">/</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">Mantine hooks</a><div class="m-3b8f2208 mantine-Breadcrumbs-separator">/</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">use-id</a></div><div style="margin-top:var(--mantine-spacing-xs)" class="m-8b3717df mantine-Breadcrumbs-root"><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://mantine.dev">Mantine</a><div class="mantine-rotate-rtl m-3b8f2208 mantine-Breadcrumbs-separator">→</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">Mantine hooks</a><div class="mantine-rotate-rtl m-3b8f2208 mantine-Breadcrumbs-separator">→</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">use-id</a></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Breadcrumbs</span>, <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">const</span> items = [
-  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Mantine&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
-  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Mantine hooks&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
-  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;use-id&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
-].<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">item, index</span>) =&gt;</span> (
-  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Anchor</span> <span class="hljs-attr">href</span>=<span class="hljs-string">{item.href}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>&gt;</span>
-    {item.title}
-  <span class="hljs-tag">&lt;/<span class="hljs-name">Anchor</span>&gt;</span></span>
-));
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Breadcrumbs</span>&gt;</span>{items}<span class="hljs-tag">&lt;/<span class="hljs-name">Breadcrumbs</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Breadcrumbs</span> <span class="hljs-attr">separator</span>=<span class="hljs-string">&quot;→&quot;</span> <span class="hljs-attr">mt</span>=<span class="hljs-string">&quot;xs&quot;</span>&gt;</span>{items}<span class="hljs-tag">&lt;/<span class="hljs-name">Breadcrumbs</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/anchor"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Anchor</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/burger"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Burger</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/breadcrumbs","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/breadcrumbs/index.html b/core/breadcrumbs/index.html
new file mode 100644
index 00000000000..cbfae71c0ca
--- /dev/null
+++ b/core/breadcrumbs/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Breadcrumbs | Mantine</title><meta name="description" content="Separates list of react nodes with given separator"/><meta name="og:title" content="Breadcrumbs | Mantine"/><meta name="og:description" content="Separates list of react nodes with given separator"/><meta name="twitter:title" content="Breadcrumbs | Mantine"/><meta name="twitter:description" content="Separates list of react nodes with given separator"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/breadcrumbs-d772d03e29259639.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Breadcrumbs</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Separates list of react nodes with given separator</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Breadcrumbs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Breadcrumbs/Breadcrumbs.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/breadcrumbs.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Breadcrumbs</code> component accepts any number of React nodes as children
+and adds a given separator (defaults to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">/</code>) between them:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-8b3717df mantine-Breadcrumbs-root"><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://mantine.dev">Mantine</a><div class="m-3b8f2208 mantine-Breadcrumbs-separator">/</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">Mantine hooks</a><div class="m-3b8f2208 mantine-Breadcrumbs-separator">/</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">use-id</a></div><div style="margin-top:var(--mantine-spacing-xs)" class="m-8b3717df mantine-Breadcrumbs-root"><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://mantine.dev">Mantine</a><div class="mantine-rotate-rtl m-3b8f2208 mantine-Breadcrumbs-separator">→</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">Mantine hooks</a><div class="mantine-rotate-rtl m-3b8f2208 mantine-Breadcrumbs-separator">→</div><a class="mantine-focus-auto m-849cf0da m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#">use-id</a></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Breadcrumbs</span>, <span class="hljs-title class_">Anchor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">const</span> items = [
+  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Mantine&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
+  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;Mantine hooks&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
+  { <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;use-id&#x27;</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">&#x27;#&#x27;</span> },
+].<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">item, index</span>) =&gt;</span> (
+  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Anchor</span> <span class="hljs-attr">href</span>=<span class="hljs-string">{item.href}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>&gt;</span>
+    {item.title}
+  <span class="hljs-tag">&lt;/<span class="hljs-name">Anchor</span>&gt;</span></span>
+));
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Breadcrumbs</span>&gt;</span>{items}<span class="hljs-tag">&lt;/<span class="hljs-name">Breadcrumbs</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Breadcrumbs</span> <span class="hljs-attr">separator</span>=<span class="hljs-string">&quot;→&quot;</span> <span class="hljs-attr">mt</span>=<span class="hljs-string">&quot;xs&quot;</span>&gt;</span>{items}<span class="hljs-tag">&lt;/<span class="hljs-name">Breadcrumbs</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/anchor/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Anchor</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/burger/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Burger</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/breadcrumbs","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/burger.html b/core/burger/index.html
similarity index 50%
rename from core/burger.html
rename to core/burger/index.html
index 1faccc957aa..2250464eb78 100644
--- a/core/burger.html
+++ b/core/burger/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/burger-ac24c3a6db416c1c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Burger</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Open/close navigation button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Burger</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Burger/Burger.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/burger.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/burger-ac24c3a6db416c1c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Burger</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Open/close navigation button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Burger</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Burger/Burger.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/burger.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Burger</code> component renders open/close menu button.
 Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opened</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClick</code> props to control Burger state.
 If <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opened</code> prop is set, cross will be rendered, otherwise – burger.</p>
@@ -23,7 +23,7 @@
 }</code></pre></div></div></div></div>
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Burger</code> accessible for screen readers, you need to either set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-label</code> or
-use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> component:</p>
+use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> component:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Burger</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -36,4 +36,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Burger</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/breadcrumbs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Breadcrumbs</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/nav-link"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavLink</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/burger","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/breadcrumbs/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Breadcrumbs</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/nav-link/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavLink</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/burger","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/button.html b/core/button/index.html
similarity index 81%
rename from core/button.html
rename to core/button/index.html
index 892dc94f4cf..ec0c2757aa6 100644
--- a/core/button.html
+++ b/core/button/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/button-a33e546d38fe0d6a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Button</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Button component to render button or link</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Button/Button.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/button-a33e546d38fe0d6a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Button</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Button component to render button or link</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Button/Button.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-fz:var(--mantine-font-size-sm);--button-radius:var(--mantine-radius-sm);--button-bg:var(--mantine-color-blue-filled);--button-hover:var(--mantine-color-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" data-size="sm" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rdkgddarblu6" id="mantine-Rdkgddarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rdkgddarblu6"><option value="default">Default</option><option value="filled" selected="">Filled</option><option value="light">Light</option><option value="outline">Outline</option><option value="subtle">Subtle</option><option value="transparent">Transparent</option><option value="white">White</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmlkgddarblu6-dropdown" id="mantine-Rtbmlkgddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R15kgddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -19,7 +19,7 @@
 <div id="left-and-right-sections" data-heading="Left and right sections" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#left-and-right-sections">Left and right sections</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code> allow adding icons or any other element to the left and right side of the button.
 When a section is added, padding on the corresponding side is reduced.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code> are flipped in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl">RTL</a> mode
+<p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code> are flipped in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rtl/">RTL</a> mode
 (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">leftSection</code> is displayed on the right and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code> is displayed on the left).</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-with-left-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-photo"><path d="M15 8h.01"></path><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path></svg></span><span class="m-811560b9 mantine-Button-label">Gallery</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-right-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Download</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-download"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path><path d="M7 11l5 5l5 -5"></path><path d="M12 4l0 12"></path></svg></span></span></button><button style="--button-bg:var(--mantine-color-blue-light);--button-hover:var(--mantine-color-blue-light-hover);--button-color:var(--mantine-color-blue-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-with-left-section="true" data-with-right-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-photo"><path d="M15 8h.01"></path><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path></svg></span><span class="m-811560b9 mantine-Button-label">Visit gallery</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mantine-rotate-rtl"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconPhoto</span>, <span class="hljs-title class_">IconDownload</span>, <span class="hljs-title class_">IconArrowRight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
@@ -93,7 +93,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> styles.</p>
+<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> styles.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Gradient button</span></span></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkkddarblu6-label">Gradient from</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relrdkkddarblu6-dropdown" id="mantine-Relrdkkddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkkddarblu6-label">Gradient to</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relrlkkddarblu6-dropdown" id="mantine-Relrlkkddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkkddarblu6-label">Gradient degree</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="360" aria-valuemin="0" aria-valuenow="90"></div><div></div></div></div><input type="hidden" value="90"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -141,7 +141,7 @@
 also when the button is disabled by the parent component (for example, when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code> prop is set on a
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;fieldset /&gt;</code> element which contains <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code>).</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">&amp;[data-disabled]</code> is used to style the button when it is not actually disabled but should look like
-it is (for example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> should be used if you need to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code>
+it is (for example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> should be used if you need to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code>
 or when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> is used as a link)</li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto m-13d58bb2 m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-disabled="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Disabled with styles</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.button</span> {
@@ -153,7 +153,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="disabled-button-with-tooltip" data-heading="Disabled button with Tooltip" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#disabled-button-with-tooltip">Disabled button with Tooltip</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">onMouseLeave</code> event <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/facebook/react/issues/18753">is not triggered</a> when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> is disabled, so if you need to use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> you need to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> prop on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> with disabled <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> you need to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> prop on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code>
 instead of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code>. Note that it is also required to change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClick</code> event handler to
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">(event) =&gt; event.preventDefault()</code> as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> is not actually disabled and will still trigger
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClick</code> event.</p>
@@ -169,8 +169,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loading-state" data-heading="Loading state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loading-state">Loading state</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop is set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> will be disabled and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> with overlay will be rendered
-in the center of the button. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> color depends on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> variant.</p>
+<p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop is set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> will be disabled and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> with overlay will be rendered
+in the center of the button. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> color depends on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> variant.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-loading="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-a25b86ee mantine-Button-loader"><span style="--loader-size:calc(var(--button-height) / 1.8);--loader-color:var(--button-color)" class="m-b34414df m-5ae2e3c mantine-Loader-root"></span></span><span class="m-811560b9 mantine-Button-label" data-loading="true">Filled button</span></span></button><button style="--button-bg:var(--mantine-color-blue-light);--button-hover:var(--mantine-color-blue-light-hover);--button-color:var(--mantine-color-blue-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-loading="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-a25b86ee mantine-Button-loader"><span style="--loader-size:calc(var(--button-height) / 1.8);--loader-color:var(--button-color)" class="m-b34414df m-5ae2e3c mantine-Loader-root"></span></span><span class="m-811560b9 mantine-Button-label" data-loading="true">Light button</span></span></button><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-loading="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-a25b86ee mantine-Button-loader"><span style="--loader-size:calc(var(--button-height) / 1.8);--loader-color:var(--button-color)" class="m-b34414df m-5ae2e3c mantine-Loader-root"></span></span><span class="m-811560b9 mantine-Button-label" data-loading="true">Outline button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -187,8 +187,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loader-props" data-heading="Loader props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loader-props">Loader props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can customize <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> prop, it accepts all props that
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component has:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can customize <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code> prop, it accepts all props that
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component has:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-loading="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-a25b86ee mantine-Button-loader"><span style="--loader-size:calc(var(--button-height) / 1.8);--loader-color:var(--button-color)" class="m-4e3f22d7 m-5ae2e3c mantine-Loader-root"><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span><span class="m-870c4af"></span></span></span><span class="m-811560b9 mantine-Button-label" data-loading="true">Loading button</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -198,7 +198,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -206,7 +206,7 @@
  * Hover over selectors to apply outline styles
  *
  */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Example of customizing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes">data-* attributes</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of customizing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes/">data-* attributes</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-8b35c16f m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" data-with-right-section="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-27c75738 m-a74036a mantine-Button-section" data-position="left">12</span><span class="m-811560b9 mantine-Button-label">Send files</span><span class="m-27c75738 m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-right" style="width:calc(1.125rem * var(--mantine-scale))"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></span></span></button><button style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto m-8b35c16f m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-disabled="true" data-with-left-section="true" data-with-right-section="true" type="button" disabled=""><span class="m-80f1301b mantine-Button-inner"><span class="m-27c75738 m-a74036a mantine-Button-section" data-position="left">3</span><span class="m-811560b9 mantine-Button-label">Send files</span><span class="m-27c75738 m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-right" style="width:calc(1.125rem * var(--mantine-scale))"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.root</span> {
   <span class="hljs-attribute">border-top-left-radius</span>: <span class="hljs-built_in">var</span>(--mantine-radius-xl);
   <span class="hljs-attribute">border-bottom-left-radius</span>: <span class="hljs-built_in">var</span>(--mantine-radius-xl);
@@ -252,8 +252,8 @@
   }
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="custom-variants" data-heading="Custom variants" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-variants">Custom variants</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> variants, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes">data-variant</a> attribute.
-Usually new variants are added on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>, this way they are
+<p class="MdxTypography_paragraph__Lp7wh">To add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> variants, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/variants-sizes/">data-variant</a> attribute.
+Usually new variants are added on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>, this way they are
 available in all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> components in your application.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-3abb4e8a m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="danger" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Danger variant</span></span></button><button class="mantine-focus-auto mantine-active m-3abb4e8a m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="primary" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Primary variant</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -278,7 +278,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="customize-variants-colors" data-heading="Customize variants colors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-variants-colors">Customize variants colors</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can customize colors for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> and other components variants by adding
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-variant-resolver">variantColorResolver</a> to your theme.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-variant-resolver">variantColorResolver</a> to your theme.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-lime-4);--button-hover:var(--mantine-color-lime-5);--button-color:var(--mantine-color-black);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Lime filled button</span></span></button><button style="--button-bg:rgba(253, 126, 20, 0.1);--button-hover:rgba(253, 126, 20, 0.15);--button-color:rgba(228, 113, 18, 1);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid #fd7e14" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Orange light button</span></span></button><button style="--button-bg:var(--mantine-color-red-9);--button-hover:var(--mantine-color-red-8);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="danger" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Danger button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> {
   <span class="hljs-title class_">Button</span>,
   <span class="hljs-title class_">Group</span>,
@@ -368,7 +368,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Button.Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
@@ -380,11 +380,11 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ButtonProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyButtonProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ButtonProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ButtonProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ButtonProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="get-element-ref" data-heading="Get element ref" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-element-ref">Get element ref</a></h2><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> ref = useRef&lt;<span class="hljs-title class_">HTMLButtonElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/action-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ActionIcon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/close-button"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CloseButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/button","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/action-icon/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ActionIcon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/close-button/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CloseButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/button","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/card.html b/core/card/index.html
similarity index 66%
rename from core/card.html
rename to core/card/index.html
index a5331adbfc8..d125c9f5e4a 100644
--- a/core/card.html
+++ b/core/card/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/card-c8480d9c06d586c5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Card</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Card with sections</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Card</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Card/Card.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/card.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card</code> is a wrapper around <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper">Paper</a> component with some additional styles and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card.Section</code>
-component that allows to split card into sections. If you do not need sections, you use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper">Paper</a> component instead.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/card-c8480d9c06d586c5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Card</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Card with sections</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Card</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Card/Card.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/card.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card</code> is a wrapper around <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper/">Paper</a> component with some additional styles and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card.Section</code>
+component that allows to split card into sections. If you do not need sections, you use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/paper/">Paper</a> component instead.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="--paper-radius:var(--mantine-radius-md);--paper-shadow:var(--mantine-shadow-sm);--card-padding:var(--mantine-spacing-lg)" class="m-e615b15f mantine-Card-root m-1b7284a3 mantine-Paper-root" data-with-border="true"><div class="m-599a2148 mantine-Card-section" data-first-section="true"><img class="m-9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="160" alt="Norway"/></div><div style="--group-justify:space-between;margin-top:var(--mantine-spacing-md);margin-bottom:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><p style="font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Norway Fjord Adventures</p><div style="--badge-bg:var(--mantine-color-pink-light);--badge-color:var(--mantine-color-pink-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">On Sale</span></div></div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway</p><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-blue-light);--button-hover:var(--mantine-color-blue-light-hover);--button-color:var(--mantine-color-blue-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Book classic tour now</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Card</span>, <span class="hljs-title class_">Image</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Badge</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -38,7 +38,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Card is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> component, you can change its root element:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Card is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> component, you can change its root element:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true" data-dimmed="true"><div class="m-ad8eb9d6"><a style="--paper-shadow:var(--mantine-shadow-sm);--card-padding:var(--mantine-spacing-lg)" class="m-e615b15f mantine-Card-root m-1b7284a3 mantine-Paper-root" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><div class="m-599a2148 mantine-Card-section" data-first-section="true"><img style="height:calc(10rem * var(--mantine-scale))" class="m-9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1579227114347-15d08fc37cae?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2550&amp;q=80" alt="No way!"/></div><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">You&#x27;ve won a million dollars in cash!</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:var(--mantine-spacing-xs);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Please click anywhere on this card to claim your reward, this is not a fraud, trust us</p></a></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Card</span>, <span class="hljs-title class_">Image</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -114,7 +114,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="polymorphic-cardsection" data-heading="Polymorphic Card.Section" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-cardsection">Polymorphic Card.Section</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card.Section</code> is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> component, you can change its root element:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Card.Section</code> is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> component, you can change its root element:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="--paper-radius:var(--mantine-radius-md);--paper-shadow:var(--mantine-shadow-sm);--card-padding:var(--mantine-spacing-lg)" class="m-e615b15f mantine-Card-root m-1b7284a3 mantine-Paper-root" data-with-border="true"><a class="m-599a2148 mantine-Card-section" href="https://mantine.dev/" data-first-section="true"><img class="m-9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=720&amp;q=80" height="160" alt="Norway"/></a><div style="--group-justify:space-between;margin-top:var(--mantine-spacing-md);margin-bottom:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><p style="font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Norway Fjord Adventures</p><div style="--badge-bg:var(--mantine-color-pink-light);--badge-color:var(--mantine-color-pink-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">On Sale</span></div></div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway</p><button style="--button-radius:var(--mantine-radius-md);--button-bg:var(--mantine-color-blue-light);--button-hover:var(--mantine-color-blue-light-hover);--button-color:var(--mantine-color-blue-light-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Book classic tour now</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Card</span>, <span class="hljs-title class_">Image</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Badge</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -211,4 +211,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Card.Section</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Card</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/badge"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Badge</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-swatch"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorSwatch</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/card","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/badge/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Badge</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-swatch/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorSwatch</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/card","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/center.html b/core/center/index.html
similarity index 52%
rename from core/center.html
rename to core/center/index.html
index 360570ff59c..3e7d1a4b7a0 100644
--- a/core/center.html
+++ b/core/center/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/center-54e40d7f26b7f1d1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Center</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Centers content vertically and horizontally</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Center/Center.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/center.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/center-54e40d7f26b7f1d1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Center</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Centers content vertically and horizontally</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Center/Center.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/center.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="background:var(--mantine-color-gray-light);max-width:calc(25rem * var(--mantine-scale));height:calc(6.25rem * var(--mantine-scale))" class="m-4451eb3a mantine-Center-root"><div style="background:var(--mantine-color-blue-light)" class="">All elements inside Center are centered</div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Center</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -29,11 +29,11 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Anchor</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Center</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Center</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Center</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Center<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">CenterProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyCenterProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">CenterProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">CenterProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/aspect-ratio"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AspectRatio</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/container"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Container</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/center","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">CenterProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/aspect-ratio/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AspectRatio</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/container/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Container</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/center","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/checkbox.html b/core/checkbox/index.html
similarity index 72%
rename from core/checkbox.html
rename to core/checkbox/index.html
index 54184bc7b82..2179669696d 100644
--- a/core/checkbox.html
+++ b/core/checkbox/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/checkbox-824905278fff7202.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Checkbox</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture boolean input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Checkbox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Checkbox/Checkbox.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/checkbox.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/checkbox-824905278fff7202.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Checkbox</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture boolean input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Checkbox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Checkbox/Checkbox.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/checkbox.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--checkbox-size:var(--checkbox-size-sm);--checkbox-radius:var(--mantine-radius-sm);--checkbox-color:var(--mantine-color-blue-filled);--label-fz:var(--mantine-font-size-sm);--label-lh:var(--label-lh-sm)" class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-size="sm" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rl8ddarblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"><label class="m-8ee546b8 mantine-Checkbox-label" for="mantine-Rl8ddarblu6">I agree to sell my privacy</label></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ddarblu6-label">Label position</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3m6q8ddarblu6" id="mantine-R3m6q8ddarblu6-right" data-focus-ring="auto" checked="" value="right"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3m6q8ddarblu6-right">Right</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3m6q8ddarblu6" id="mantine-R3m6q8ddarblu6-left" data-focus-ring="auto" value="left"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3m6q8ddarblu6-left">Left</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raq8ddarblu6" id="mantine-Raq8ddarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Raq8ddarblu6" value="I agree to sell my privacy"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Req8ddarblu6" id="mantine-Req8ddarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Req8ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riq8ddarblu6" id="mantine-Riq8ddarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riq8ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rmq8ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmmq8ddarblu6-dropdown" id="mantine-Rtbmmq8ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rqq8ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Ruq8ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R12q8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R12q8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R12q8ddarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R16q8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R16q8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R16q8ddarblu6">Indeterminate</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Checkbox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -175,4 +175,4 @@
 <span class="hljs-comment">// Ok, input is labelled by label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">GoodLabel</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Checkbox</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My checkbox&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stack"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stack</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/chip"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Chip</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/checkbox","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stack/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stack</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/chip/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Chip</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/checkbox","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/chip.html b/core/chip/index.html
similarity index 65%
rename from core/chip.html
rename to core/chip/index.html
index 8d76bf3bb79..7ace938dd35 100644
--- a/core/chip.html
+++ b/core/chip/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/chip-4ee6b49268677a0f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Chip</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick one or multiple values with inline controls</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Chip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Chip/Chip.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/chip.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/chip-4ee6b49268677a0f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Chip</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick one or multiple values with inline controls</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Chip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Chip/Chip.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/chip.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--chip-fz:var(--mantine-font-size-sm);--chip-size:var(--chip-size-sm);--chip-radius:var(--mantine-radius-xl);--chip-checked-padding:var(--chip-checked-padding-sm);--chip-padding:var(--chip-padding-sm);--chip-icon-size:var(--chip-icon-size-sm);--chip-bg:transparent;--chip-hover:var(--mantine-color-blue-outline-hover);--chip-color:var(--mantine-color-blue-outline);--chip-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline);--chip-spacing:var(--chip-spacing-sm)" class="m-f59ffda3 mantine-Chip-root" data-variant="outline" data-size="sm"><input type="checkbox" class="m-bde07329 mantine-Chip-input" id="mantine-Rakddarblu6" color="blue" radius="xl" checked=""/><label for="mantine-Rakddarblu6" data-checked="true" class="m-3904c1af m-be049a53 mantine-Chip-label"><span class="m-9ac86df9 mantine-Chip-iconWrapper"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-d6d72580 mantine-Chip-checkIcon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span>Awesome chip</label></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atjd4ddarblu6-dropdown" id="mantine-R7atjd4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtld4ddarblu6" id="mantine-Rtld4ddarblu6-outline" data-focus-ring="auto" checked="" value="outline"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtld4ddarblu6-outline">Outline</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtld4ddarblu6" id="mantine-Rtld4ddarblu6-light" data-focus-ring="auto" value="light"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtld4ddarblu6-light">Light</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtld4ddarblu6" id="mantine-Rtld4ddarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtld4ddarblu6-filled">Filled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R9d4ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(100% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:100%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="100"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Chip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -99,4 +99,4 @@
 }</code></pre></div></div></div></div>
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Chip</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Chip.Group</code> components are accessible by default – they are built with native radio/checkbox inputs,
-all keyboard events work the same as with native controls.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Checkbox</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/chip","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+all keyboard events work the same as with native controls.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/checkbox/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Checkbox</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/chip","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/close-button.html b/core/close-button.html
deleted file mode 100644
index a21bd1299da..00000000000
--- a/core/close-button.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>CloseButton | Mantine</title><meta name="description" content="ActionIcon with close icon"/><meta name="og:title" content="CloseButton | Mantine"/><meta name="og:description" content="ActionIcon with close icon"/><meta name="twitter:title" content="CloseButton | Mantine"/><meta name="twitter:description" content="ActionIcon with close icon"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/close-button-23b40e01229b2d7e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CloseButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">ActionIcon with close icon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/CloseButton/CloseButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/close-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">CloseButton</code> renders a button with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">X</code> icon inside. It is used in other Mantine components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer">Drawer</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a>.</p>
-<div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--cb-size:var(--cb-size-md)" class="mantine-focus-auto mantine-active m-220c80f2 m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="md" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1mildarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2mildarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7emildarblu6" id="mantine-R7emildarblu6-transparent" data-focus-ring="auto" value="transparent"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7emildarblu6-transparent">Transparent</label></div><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7emildarblu6" id="mantine-R7emildarblu6-subtle" data-focus-ring="auto" checked="" value="subtle"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R7emildarblu6-subtle">Subtle</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span> /&gt;</span></span>;
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">CloseButton</code> accessible for screen readers, you need to either set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-label</code> or
-use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> component:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Close modal&quot;</span> /&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">VisuallyHidden</span>&gt;</span>Close modal<span class="hljs-tag">&lt;/<span class="hljs-name">VisuallyHidden</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">CloseButton</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Button</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/copy-button"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CopyButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/close-button","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/close-button/index.html b/core/close-button/index.html
new file mode 100644
index 00000000000..4b86ca5fba4
--- /dev/null
+++ b/core/close-button/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>CloseButton | Mantine</title><meta name="description" content="ActionIcon with close icon"/><meta name="og:title" content="CloseButton | Mantine"/><meta name="og:description" content="ActionIcon with close icon"/><meta name="twitter:title" content="CloseButton | Mantine"/><meta name="twitter:description" content="ActionIcon with close icon"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/close-button-23b40e01229b2d7e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CloseButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">ActionIcon with close icon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/CloseButton/CloseButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/close-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">CloseButton</code> renders a button with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">X</code> icon inside. It is used in other Mantine components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer/">Drawer</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a>.</p>
+<div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--cb-size:var(--cb-size-md)" class="mantine-focus-auto mantine-active m-220c80f2 m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="md" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1mildarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2mildarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7emildarblu6" id="mantine-R7emildarblu6-transparent" data-focus-ring="auto" value="transparent"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7emildarblu6-transparent">Transparent</label></div><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7emildarblu6" id="mantine-R7emildarblu6-subtle" data-focus-ring="auto" checked="" value="subtle"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R7emildarblu6-subtle">Subtle</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span> /&gt;</span></span>;
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
+<div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">CloseButton</code> accessible for screen readers, you need to either set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-label</code> or
+use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> component:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CloseButton</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Close modal&quot;</span> /&gt;</span>
+
+      <span class="hljs-tag">&lt;<span class="hljs-name">CloseButton</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">VisuallyHidden</span>&gt;</span>Close modal<span class="hljs-tag">&lt;/<span class="hljs-name">VisuallyHidden</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">CloseButton</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/button/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Button</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/copy-button/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CopyButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/close-button","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/code.html b/core/code/index.html
similarity index 52%
rename from core/code.html
rename to core/code/index.html
index e9559a60cee..884aa602b76 100644
--- a/core/code.html
+++ b/core/code/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/code-1ff6131ae9165253.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Code</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline and block code</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Code</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Code/Code.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/code.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/code-1ff6131ae9165253.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Code</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline and block code</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Code</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Code/Code.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/code.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">By default, Code component renders inline <code class="m-b183c0a2 mantine-Code-root" dir="ltr">code</code> html element:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.createElement()</code></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Code</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -31,7 +31,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="custom-color" data-heading="Custom color" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-color">Custom color</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">By default, code color is gray, you can change it to any valid CSS color or to one
-of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors">theme.colors</a>:</p>
+of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/">theme.colors</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><code style="--code-bg:var(--mantine-color-blue-9);color:var(--mantine-color-white)" class="m-b183c0a2 mantine-Code-root" dir="ltr">React.createElement()</code><code style="--code-bg:var(--mantine-color-blue-light)" class="m-b183c0a2 mantine-Code-root" dir="ltr">React.createElement()</code></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Code</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -43,4 +43,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Code</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;var(--mantine-color-blue-light)&quot;</span>&gt;</span>React.createElement()<span class="hljs-tag">&lt;/<span class="hljs-name">Code</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/blockquote"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Blockquote</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/highlight"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Highlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/code","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/blockquote/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Blockquote</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/highlight/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Highlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/code","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/collapse.html b/core/collapse/index.html
similarity index 54%
rename from core/collapse.html
rename to core/collapse/index.html
index c5e6274c34f..8b0b341e1b4 100644
--- a/core/collapse.html
+++ b/core/collapse/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/collapse-026c69898bac2522.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Collapse</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Animate presence with slide down/up transition</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Collapse</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Collapse/Collapse.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/collapse.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/collapse-026c69898bac2522.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Collapse</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Animate presence with slide down/up transition</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Collapse</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Collapse/Collapse.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/collapse.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><div style="--group-justify:center;margin-bottom:calc(0.3125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle content</span></span></button></div><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur&#x27;s back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.</p></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Collapse</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -48,4 +48,4 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="nested-collapse-components" data-heading="Nested Collapse components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#nested-collapse-components">Nested Collapse components</a></h2>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;margin-top:var(--mantine-spacing-md);max-width:calc(25rem * var(--mantine-scale))" class=""><button style="margin-bottom:calc(0.3125rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Root collapse</span></span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md);font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">This collapse contains another collapse</p><p style="margin-top:var(--mantine-spacing-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.</p><div style="margin-right:auto;margin-left:auto;margin-top:var(--mantine-spacing-md);max-width:calc(25rem * var(--mantine-scale))" class=""><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline);margin-bottom:calc(0.3125rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Inner collapse</span></span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md);font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">This collapse is inside another collapse</p><p style="margin-top:var(--mantine-spacing-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.</p></div></div></div></div></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Box</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/divider"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Divider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/collapse","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;margin-top:var(--mantine-spacing-md);max-width:calc(25rem * var(--mantine-scale))" class=""><button style="margin-bottom:calc(0.3125rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Root collapse</span></span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md);font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">This collapse contains another collapse</p><p style="margin-top:var(--mantine-spacing-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.</p><div style="margin-right:auto;margin-left:auto;margin-top:var(--mantine-spacing-md);max-width:calc(25rem * var(--mantine-scale))" class=""><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline);margin-bottom:calc(0.3125rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Inner collapse</span></span></button><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md);font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">This collapse is inside another collapse</p><p style="margin-top:var(--mantine-spacing-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.</p></div></div></div></div></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/box/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Box</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/divider/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Divider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/collapse","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/color-input.html b/core/color-input/index.html
similarity index 74%
rename from core/color-input.html
rename to core/color-input/index.html
index 0a391dac0b6..022dbf805b7 100644
--- a/core/color-input.html
+++ b/core/color-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-input-27686785638c1f19.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture color from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorInput/ColorInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-input-27686785638c1f19.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture color from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorInput/ColorInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-ColorInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-ColorInput-label" data-variant="default" data-size="sm" for="mantine-Rl8ldarblu6" id="mantine-Rl8ldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-ColorInput-description" data-variant="default" data-size="sm" id="mantine-Rl8ldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-ColorInput-wrapper" data-variant="default" data-size="sm" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-ColorInput-section"><div style="--cs-size:var(--ci-preview-size);--ci-preview-size:var(--ci-preview-size-sm)" class="mantine-focus-auto m-c5ccdcab mantine-ColorInput-colorPreview m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div><input class="m-8fb7ebe7 mantine-Input-input mantine-ColorInput-input" data-variant="default" autoComplete="off" placeholder="Input placeholder" spellcheck="false" aria-invalid="false" aria-describedby="mantine-Rl8ldarblu6-description" id="mantine-Rl8ldarblu6" value=""/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6q8ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riq8ldarblu6" id="mantine-Riq8ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riq8ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmq8ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmq8ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmq8ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqq8ldarblu6" id="mantine-Rqq8ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rqq8ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ruq8ldarblu6" id="mantine-Ruq8ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Ruq8ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -52,7 +52,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">By default, there will be 10 swatches per row, you can change this with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">swatchesPerRow</code> prop,
-like in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker">ColorPicker</a> component:</p>
+like in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker/">ColorPicker</a> component:</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--cp-swatch-size:14.285714285714286%;margin-right:auto;margin-left:auto" class="m-fee9c77 mantine-ColorPicker-wrapper"><div class="m-202a296e mantine-ColorPicker-saturation" role="slider" aria-valuenow="0.74227" aria-valuetext="rgba(50, 151, 194, 1)" tabindex="0"><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-color:hsl(197.917, 100%, 50%)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(90deg, #fff, transparent)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(0deg, #000, transparent)"></div><div style="background-color:rgba(50, 151, 194, 1);--_thumb-y-offset:23.921999999999997%;--_thumb-x-offset:74.227%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div><div class="m-bffecc3e mantine-ColorPicker-body"><div class="m-3283bb96 mantine-ColorPicker-sliders"><div class="m-d856d47d mantine-ColorPicker-slider" data-hue="true" role="slider" aria-valuenow="197.917" aria-valuemax="360" aria-valuemin="0" tabindex="0" data-focus-ring="auto"><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image: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%))"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="box-shadow:rgba(0, 0, 0, .1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, .15) 0 0 calc(0.25rem * var(--mantine-scale)) inset"></div><div style="top:calc(0.0625rem * var(--mantine-scale));background:hsl(197.917, 100%, 50%);--_thumb-y-offset:0%;--_thumb-x-offset:54.97694444444444%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div></div></div><div class="m-5711e686 mantine-ColorPicker-swatches"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#25262b" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#25262b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#868e96" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#868e96"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#fa5252" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fa5252"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#e64980" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e64980"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#be4bdb" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#be4bdb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#7950f2" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7950f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#4c6ef5" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4c6ef5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#228be6" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#228be6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#15aabf" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#15aabf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#12b886" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#12b886"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#40c057" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#40c057"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#82c91e" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#82c91e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#fab005" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fab005"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-d8ee6fd8 mantine-ColorPicker-swatch m-de3d2490 mantine-ColorSwatch-root" type="button" aria-label="#fd7e14" tabindex="0" data-swatch="true"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fd7e14"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6qbtdarblu6-label">Swatches per row</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(28.57142857142857% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:28.57142857142857%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="12" aria-valuemin="5" aria-valuenow="7"></div><div></div></div></div><input type="hidden" value="7"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -104,7 +104,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorInput</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -134,4 +134,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/chip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Chip</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-picker"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/chip/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Chip</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-picker/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/color-picker.html b/core/color-picker/index.html
similarity index 76%
rename from core/color-picker.html
rename to core/color-picker/index.html
index 9845e17f231..fd1d4a11d5c 100644
--- a/core/color-picker.html
+++ b/core/color-picker/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-picker-8bb28a401b18ebed.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick colors</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorPicker/ColorPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-picker-8bb28a401b18ebed.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick colors</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorPicker/ColorPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--stack-align:center" class="m-6d731127 mantine-Stack-root"><div style="--cp-swatch-size:14.285714285714286%" class="m-fee9c77 mantine-ColorPicker-wrapper"><div class="m-202a296e mantine-ColorPicker-saturation" role="slider" aria-valuenow="0.68667" aria-valuetext="rgba(47, 119, 150, 0.7)" tabindex="0"><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-color:hsl(198.058, 100%, 50%)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(90deg, #fff, transparent)"></div><div class="m-11b3db02 mantine-ColorPicker-saturationOverlay" style="background-image:linear-gradient(0deg, #000, transparent)"></div><div style="background-color:rgba(47, 119, 150, 0.7);--_thumb-y-offset:41.176%;--_thumb-x-offset:68.667%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div><div class="m-bffecc3e mantine-ColorPicker-body"><div class="m-3283bb96 mantine-ColorPicker-sliders"><div class="m-d856d47d mantine-ColorPicker-slider" data-hue="true" role="slider" aria-valuenow="198.058" aria-valuemax="360" aria-valuemin="0" tabindex="0" data-focus-ring="auto"><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image: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%))"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="box-shadow:rgba(0, 0, 0, .1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, .15) 0 0 calc(0.25rem * var(--mantine-scale)) inset"></div><div style="top:calc(0.0625rem * var(--mantine-scale));background:hsl(198.058, 100%, 50%);--_thumb-y-offset:0%;--_thumb-x-offset:55.01611111111111%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div><div class="m-d856d47d mantine-ColorPicker-slider" data-alpha="true" role="slider" aria-valuenow="0.7" aria-valuemax="1" aria-valuemin="0" tabindex="0" data-focus-ring="auto"><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image: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%);background-size:calc(0.5rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));background-position:0 0, 0 calc(0.25rem * var(--mantine-scale)), calc(0.25rem * var(--mantine-scale)) -calc(0.25rem * var(--mantine-scale)), -calc(0.25rem * var(--mantine-scale)) 0"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="background-image:linear-gradient(90deg, transparent, #2f7796)"></div><div class="m-8f327113 mantine-ColorPicker-sliderOverlay" style="box-shadow:rgba(0, 0, 0, .1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, .15) 0 0 calc(0.25rem * var(--mantine-scale)) inset"></div><div style="top:calc(0.0625rem * var(--mantine-scale));background:transparent;--_thumb-y-offset:0%;--_thumb-x-offset:70%" class="m-40d572ba mantine-ColorPicker-thumb"></div></div></div><div style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-9dddfbac mantine-ColorPicker-preview m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:rgba(47, 119, 150, 0.7)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div></div><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">rgba(47, 119, 150, 0.7)</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorPicker</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Stack</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -87,7 +87,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorPicker</span> <span class="hljs-attr">fullWidth</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;lg&quot;</span> <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;rgba&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorPicker</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorPicker</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -107,4 +107,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorPicker</span> <span class="hljs-attr">saturationLabel</span>=<span class="hljs-string">&quot;Saturation&quot;</span> <span class="hljs-attr">hueLabel</span>=<span class="hljs-string">&quot;Hue&quot;</span> <span class="hljs-attr">alphaLabel</span>=<span class="hljs-string">&quot;Alpha&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/fieldset"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Fieldset</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-picker","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/fieldset/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Fieldset</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-picker","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/color-swatch.html b/core/color-swatch/index.html
similarity index 56%
rename from core/color-swatch.html
rename to core/color-swatch/index.html
index 7a1266e699f..d61bfa92e7e 100644
--- a/core/color-swatch.html
+++ b/core/color-swatch/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-swatch-76eda182c8cba7a5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorSwatch</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Displays color</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorSwatch/ColorSwatch.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-swatch.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/color-swatch-76eda182c8cba7a5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ColorSwatch</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Displays color</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ColorSwatch/ColorSwatch.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/color-swatch.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><div class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#009790"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:rgba(234, 22, 174, 0.5)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-5)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -23,7 +23,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorSwatch</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;rgba(255, 255, 255, 0.7)&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSwatch</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSwatch</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorSwatch</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
@@ -35,7 +35,7 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSwatch<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">ColorSwatchProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyColorSwatchProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ColorSwatchProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ColorSwatchProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">ColorSwatchProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="cursor:pointer;color:var(--mantine-color-white)" class="mantine-focus-auto m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-6)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.75rem * var(--mantine-scale));height:calc(0.75rem * var(--mantine-scale))"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSwatch</span>, <span class="hljs-title class_">CheckIcon</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -52,4 +52,4 @@
       {checked &amp;&amp; <span class="hljs-tag">&lt;<span class="hljs-name">CheckIcon</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">width:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">12</span>), <span class="hljs-attr">height:</span> <span class="hljs-attr">rem</span>(<span class="hljs-attr">12</span>) }} /&gt;</span>}
     <span class="hljs-tag">&lt;/<span class="hljs-name">ColorSwatch</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/card"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Card</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/image"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Image</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-swatch","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/card/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Card</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/image/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Image</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/color-swatch","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/combobox.html b/core/combobox/index.html
similarity index 82%
rename from core/combobox.html
rename to core/combobox/index.html
index 49830ee83e1..2c9a84723cb 100644
--- a/core/combobox.html
+++ b/core/combobox/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/9-1e1cb50a06718751.js" defer=""></script><script src="/_next/static/chunks/pages/core/combobox-ed1d83eb2b961226.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Combobox</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Create custom select, autocomplete or multiselect inputs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Combobox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Combobox/Combobox.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/combobox.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/9-1e1cb50a06718751.js" defer=""></script><script src="/_next/static/chunks/pages/core/combobox-ed1d83eb2b961226.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Combobox</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Create custom select, autocomplete or multiselect inputs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Combobox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Combobox/Combobox.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/combobox.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code> provides a set of components and hooks to custom select, multiselect or autocomplete components.
 The component is very flexible – you have full control of the rendering and logic.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-InputBase-root"><div class="m-6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R3l0ldarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
@@ -51,7 +51,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="examples" data-heading="Examples" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#examples">Examples</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox?e=BasicSelect">separate page</a>.</p>
+You can find all 50+ examples on a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/combobox/?e=BasicSelect">separate page</a>.</p>
 <div id="usecombobox-hook" data-heading="useCombobox hook" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usecombobox-hook">useCombobox hook</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">useCombobox</code> hook provides combobox store. The store contains the current state of the component
 and handlers to update it. Created store must be passed to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">store</code> prop of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code>:</p>
@@ -199,9 +199,9 @@
 and adds keyboard event listeners to it.</p>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Target</code> requires a single child element or component. The child component
 must accept <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">...others</code> props. You can use any Mantine component as a target without
-any additional configuration, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>
-or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input#inputbase-component">InputBase</a>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Target</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a> component:</p>
+any additional configuration, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>
+or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/#inputbase-component">InputBase</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Target</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a> component:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R3l6tdarblu6" id="mantine-R3l6tdarblu6-label">Pick value or type anything</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Pick value or type anything" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R3l6tdarblu6" value=""/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Combobox</span>, <span class="hljs-title class_">TextInput</span>, useCombobox } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -253,7 +253,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Combobox</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Target</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Target</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="margin-bottom:var(--mantine-spacing-xs)" class=""><span style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Selected item:<!-- --> </span><span style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Nothing selected</span></div><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="listbox" autoComplete="off"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Pick item</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Combobox</span>, useCombobox, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -310,7 +310,7 @@
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.DropdownTarget</code> to position the dropdown relative to the target.</p>
 <p class="MdxTypography_paragraph__Lp7wh">You can have as many <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.EventsTarget</code> as you need, but only one <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.DropdownTarget</code>
 per <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.EventsTarget</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.DropdownTarget</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pills-input">PillsInput</a> component
+<p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.EventsTarget</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.DropdownTarget</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pills-input/">PillsInput</a> component
 to create a searchable multiselect component:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-PillsInput-root"><div class="m-6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default"><div class="m-1dcfd90b mantine-PillGroup-group"><input class="m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Search values" aria-haspopup="listbox" autoComplete="off" id="mantine-R3l8ldarblu6" aria-invalid="false" value=""/></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span>, <span class="hljs-title class_">Pill</span>, <span class="hljs-title class_">Combobox</span>, <span class="hljs-title class_">CheckIcon</span>, <span class="hljs-title class_">Group</span>, useCombobox } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -590,7 +590,7 @@
 <div id="active-option" data-heading="Active option" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#active-option">Active option</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">active</code> prop on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Option</code> component to mark it as active.
 By default, an active option does not have any styles, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-combobox-active</code>
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes">data attribute</a> to style it.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes/">data attribute</a> to style it.</p>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">combobox.selectActiveOption</code> function selects active option. Usually, it is called
 when the dropdown is opened:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-InputBase-root"><div class="m-6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R3lc5darblu6">🥦 Broccoli</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
@@ -700,7 +700,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="scrollable-list" data-heading="Scrollable list" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-list">Scrollable list</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-height</code> style on either <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Dropdown</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox.Options</code> to make the
-options list scrollable. You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mah</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> to set
+options list scrollable. You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mah</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> to set
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-height</code>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-InputBase-root"><div class="m-6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R3ldldarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">InputBase</span>, <span class="hljs-title class_">Combobox</span>, useCombobox } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -778,7 +778,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="scrollable-list-with-scrollarea" data-heading="Scrollable list with ScrollArea" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-list-with-scrollarea">Scrollable list with ScrollArea</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can also use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea or ScrollArea.Autosize</a> components
+<p class="MdxTypography_paragraph__Lp7wh">You can also use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea or ScrollArea.Autosize</a> components
 instead of native scrollbars:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-InputBase-root"><div class="m-6c018570 mantine-Input-wrapper mantine-InputBase-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-InputBase-input" data-variant="default" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R3leddarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick value</span></button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-InputBase-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">InputBase</span>, <span class="hljs-title class_">Combobox</span>, useCombobox, <span class="hljs-title class_">ScrollArea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -975,11 +975,11 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Combobox</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Combobox</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
  */</style><div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Pick value" aria-haspopup="listbox" autoComplete="off" data-expanded="true" aria-invalid="false" id="mantine-R1qmh5darblu6"/></div></div></div></div><div class="m-de00ac9"><div class="m-c4d78f60"><p style="margin-bottom:calc(0.3125rem * var(--mantine-scale));font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Component Styles API</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale));line-height:1.45" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hover over selectors to highlight corresponding elements</p></div><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">options</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Options` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">dropdown</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Dropdown` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">option</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Option` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">search</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Search` input</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">empty</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Empty` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">header</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Header` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">footer</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Footer` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">group</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">`Combobox.Group` component</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">groupLabel</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Label of `Combobox.Group` component</p></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-comment">/*
  * Hover over selectors to apply outline styles
  *
- */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/autocomplete"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Autocomplete</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/multi-select"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MultiSelect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/combobox","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+ */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/autocomplete/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Autocomplete</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/multi-select/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MultiSelect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/combobox","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/container.html b/core/container/index.html
similarity index 58%
rename from core/container.html
rename to core/container/index.html
index c194ce38469..4548ff97adc 100644
--- a/core/container.html
+++ b/core/container/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/container-bb8102414079847a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Container</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Center content with padding and max-width</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Container</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Container/Container.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/container.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/container-bb8102414079847a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Container</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Center content with padding and max-width</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Container</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Container/Container.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/container.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code> centers content and limits its <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-width</code> to the value specified in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop.
 Note that the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop does not make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-width</code> responsive, for example,
 when it set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code> it will always be <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code> regardless of screen size.</p>
@@ -43,8 +43,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="customize-sizes" data-heading="Customize sizes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-sizes">Customize sizes</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can customize existing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code> sizes and add new ones with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">CSS variables</a>
-on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can customize existing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code> sizes and add new ones with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">CSS variables</a>
+on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--container-size:calc(18.75rem * var(--mantine-scale));background:var(--mantine-color-blue-light)" class="m-7485cace mantine-Container-root" data-size="xxs">Container with custom size</div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Container</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> <span class="hljs-attr">CONTAINER_SIZES</span>: <span class="hljs-title class_">Record</span>&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">string</span>&gt; = {
@@ -83,7 +83,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="responsive-max-width" data-heading="Responsive max-width" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-max-width">Responsive max-width</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-width</code> responsive, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to set
+<p class="MdxTypography_paragraph__Lp7wh">To make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-width</code> responsive, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to set
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code>. For example, you can add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">responsive</code> size that will make <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Container</code>
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">max-width</code> different depending on screen size:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--container-size:var(--container-size-responsive);background:var(--mantine-color-blue-light)" class="m-fcba15f2 m-7485cace mantine-Container-root" data-size="responsive">Container with responsive size</div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> cx <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;clsx&#x27;</span>;
@@ -108,4 +108,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Container</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Center</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/flex"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Flex</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/container","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/center/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Center</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/flex/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Flex</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/container","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/copy-button.html b/core/copy-button/index.html
similarity index 52%
rename from core/copy-button.html
rename to core/copy-button/index.html
index 39425db2a33..dd260a02b8e 100644
--- a/core/copy-button.html
+++ b/core/copy-button/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/copy-button-6b75a8c1ae5e1b5a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CopyButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Copies given text to clipboard</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CopyButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/CopyButton/CopyButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/copy-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">CopyButton</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-clipboard">use-clipboard</a> hook.
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/copy-button-6b75a8c1ae5e1b5a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CopyButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Copies given text to clipboard</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">CopyButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/CopyButton/CopyButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/copy-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">CopyButton</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-clipboard/">use-clipboard</a> hook.
 Its children is a function that receives an object with the following properties:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">copied</code> – boolean value that indicates that a given value was recently copied to the clipboard, it resets after a given timeout (defaults to 500ms)</li>
@@ -47,4 +47,4 @@
       )}
     <span class="hljs-tag">&lt;/<span class="hljs-name">CopyButton</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/close-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CloseButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-button"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/copy-button","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/close-button/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CloseButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-button/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/copy-button","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/dialog.html b/core/dialog.html
deleted file mode 100644
index d44ed8a14e4..00000000000
--- a/core/dialog.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Dialog | Mantine</title><meta name="description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="og:title" content="Dialog | Mantine"/><meta name="og:description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="twitter:title" content="Dialog | Mantine"/><meta name="twitter:description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/dialog-b9f2adfdfd793904.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Dialog</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display a fixed overlay dialog at any side of the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dialog</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Dialog/Dialog.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/dialog.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is a simplified version of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> component.
-It does not include most of accessibility and usability <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> features:</p>
-<ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">Focus trap is not available</li>
-<li class="MdxTypography_li__JpNrx">Does not close on click outside</li>
-<li class="MdxTypography_li__JpNrx">Does not have overlay</li>
-</ul>
-<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> to attract attention with not important information or action,
-for example, you can create an email subscription form:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle dialog</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dialog</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> [opened, { toggle, close }] = <span class="hljs-title function_">useDisclosure</span>(<span class="hljs-literal">false</span>);
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{toggle}</span>&gt;</span>Toggle dialog<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">Dialog</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">{opened}</span> <span class="hljs-attr">withCloseButton</span> <span class="hljs-attr">onClose</span>=<span class="hljs-string">{close}</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;lg&quot;</span> <span class="hljs-attr">radius</span>=<span class="hljs-string">&quot;md&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;sm&quot;</span> <span class="hljs-attr">mb</span>=<span class="hljs-string">&quot;xs&quot;</span> <span class="hljs-attr">fw</span>=<span class="hljs-string">{500}</span>&gt;</span>
-          Subscribe to email newsletter
-        <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;flex-end&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;hello@gluesticker.com&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span> }} /&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{close}</span>&gt;</span>Subscribe<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">Dialog</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="change-position" data-heading="Change position" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-position">Change position</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is rendered in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal">Portal</a> and has fixed position, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position</code> prop to control dialog&#x27;s position:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Dialog in top left corner</span>
-&lt;<span class="hljs-title class_">Dialog</span> position={{ <span class="hljs-attr">top</span>: <span class="hljs-number">20</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">20</span> }} /&gt;
-
-<span class="hljs-comment">// Dialog in bottom left corner</span>
-<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Dialog</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">bottom:</span> <span class="hljs-attr">20</span>, <span class="hljs-attr">left:</span> <span class="hljs-attr">20</span> }} /&gt;</span></span></code></pre></div></div></div></div>
-<div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is not accessible and most likely will not be announced by screen reader,
-make sure you do not put any important information. In most cases it would be better
-to select <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer">Drawer</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications">Notifications</a>.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/affix"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Affix</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/drawer"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Drawer</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/dialog","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/dialog/index.html b/core/dialog/index.html
new file mode 100644
index 00000000000..2e38b182318
--- /dev/null
+++ b/core/dialog/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Dialog | Mantine</title><meta name="description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="og:title" content="Dialog | Mantine"/><meta name="og:description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="twitter:title" content="Dialog | Mantine"/><meta name="twitter:description" content="Display a fixed overlay dialog at any side of the screen"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/dialog-b9f2adfdfd793904.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Dialog</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display a fixed overlay dialog at any side of the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dialog</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Dialog/Dialog.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/dialog.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is a simplified version of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> component.
+It does not include most of accessibility and usability <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> features:</p>
+<ul class="MdxTypography_ul__pQ83b">
+<li class="MdxTypography_li__JpNrx">Focus trap is not available</li>
+<li class="MdxTypography_li__JpNrx">Does not close on click outside</li>
+<li class="MdxTypography_li__JpNrx">Does not have overlay</li>
+</ul>
+<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> to attract attention with not important information or action,
+for example, you can create an email subscription form:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle dialog</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dialog</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> [opened, { toggle, close }] = <span class="hljs-title function_">useDisclosure</span>(<span class="hljs-literal">false</span>);
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{toggle}</span>&gt;</span>Toggle dialog<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
+
+      <span class="hljs-tag">&lt;<span class="hljs-name">Dialog</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">{opened}</span> <span class="hljs-attr">withCloseButton</span> <span class="hljs-attr">onClose</span>=<span class="hljs-string">{close}</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;lg&quot;</span> <span class="hljs-attr">radius</span>=<span class="hljs-string">&quot;md&quot;</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;sm&quot;</span> <span class="hljs-attr">mb</span>=<span class="hljs-string">&quot;xs&quot;</span> <span class="hljs-attr">fw</span>=<span class="hljs-string">{500}</span>&gt;</span>
+          Subscribe to email newsletter
+        <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+
+        <span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;flex-end&quot;</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;hello@gluesticker.com&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span> }} /&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{close}</span>&gt;</span>Subscribe<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">Dialog</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
+<div id="change-position" data-heading="Change position" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-position">Change position</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is rendered in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal/">Portal</a> and has fixed position, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position</code> prop to control dialog&#x27;s position:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Dialog in top left corner</span>
+&lt;<span class="hljs-title class_">Dialog</span> position={{ <span class="hljs-attr">top</span>: <span class="hljs-number">20</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">20</span> }} /&gt;
+
+<span class="hljs-comment">// Dialog in bottom left corner</span>
+<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Dialog</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">bottom:</span> <span class="hljs-attr">20</span>, <span class="hljs-attr">left:</span> <span class="hljs-attr">20</span> }} /&gt;</span></span></code></pre></div></div></div></div>
+<div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dialog</code> is not accessible and most likely will not be announced by screen reader,
+make sure you do not put any important information. In most cases it would be better
+to select <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer/">Drawer</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications/">Notifications</a>.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/affix/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Affix</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/drawer/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Drawer</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/dialog","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/divider.html b/core/divider/index.html
similarity index 59%
rename from core/divider.html
rename to core/divider/index.html
index 78d9e2f7f4e..98ea65b6d93 100644
--- a/core/divider.html
+++ b/core/divider/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/divider-949faadea829b4ec.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Divider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Horizontal line with optional label or vertical divider</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Divider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Divider/Divider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/divider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/divider-949faadea829b4ec.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Divider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Horizontal line with optional label or vertical divider</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Divider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Divider/Divider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/divider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-top:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-sm)" class="m-3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div><div style="--divider-border-style:dashed;margin-top:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-sm)" class="m-3eebeb36 mantine-Divider-root" data-variant="dashed" data-orientation="horizontal" role="separator"></div><div style="--divider-border-style:dotted;margin-top:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-sm)" class="m-3eebeb36 mantine-Divider-root" data-variant="dotted" data-orientation="horizontal" role="separator"></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Divider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -81,4 +81,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Label<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/collapse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Collapse</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/focus-trap"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FocusTrap</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/divider","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/collapse/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Collapse</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/focus-trap/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FocusTrap</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/divider","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/drawer.html b/core/drawer/index.html
similarity index 70%
rename from core/drawer.html
rename to core/drawer/index.html
index 5b72e70c6a4..f1a91c86c5c 100644
--- a/core/drawer.html
+++ b/core/drawer/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/pages/core/drawer-0de49e704be8fb3b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Drawer</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display overlay area at any side of the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Drawer/Drawer.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/drawer.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/pages/core/drawer-0de49e704be8fb3b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Drawer</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display overlay area at any side of the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Drawer/Drawer.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/drawer.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open Drawer</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -25,7 +25,7 @@
 for example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;Drawer position=&quot;top&quot; /&gt;</code>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Left</span></span></button><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Right</span></span></button><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Top</span></span></button><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Bottom</span></span></button></div></div></div></div>
 <div id="customize-overlay" data-heading="Customize overlay" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-overlay">Customize overlay</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a> component, you can set any props that <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a> component, you can set any props that <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a>
 supports with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">overlayProps</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open drawer</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -127,8 +127,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-transition" data-heading="Change transition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-transition">Change transition</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> component. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>
-prop to customize any <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> properties:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> component. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>
+prop to customize any <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> properties:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open Drawer</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -151,7 +151,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="initial-focus" data-heading="Initial focus" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-focus">Initial focus</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap">FocusTrap</a> to trap focus. Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap/">FocusTrap</a> to trap focus. Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code>
 attribute to the element that should receive initial focus.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open drawer</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Drawer</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -189,7 +189,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">You can use the following compound components to have full control over the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer</code> rendering:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Root</code> – context provider</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Overlay</code> – render <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Overlay</code> – render <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Content</code> – main drawer element, should include all drawer content</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Header</code> – sticky header, usually contains <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Title</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.CloseButton</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Title</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h2</code> element, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-labelledby</code> of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Content</code> is pointing to this element, usually is rendered inside <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Drawer.Header</code></li>
@@ -242,4 +242,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Drawer</span> <span class="hljs-attr">closeButtonProps</span>=<span class="hljs-string">{{</span> &#x27;<span class="hljs-attr">aria-label</span>&#x27;<span class="hljs-attr">:</span> &#x27;<span class="hljs-attr">Close</span> <span class="hljs-attr">modal</span>&#x27; }} <span class="hljs-attr">opened</span> <span class="hljs-attr">onClose</span>=<span class="hljs-string">{()</span> =&gt;</span> {}} /&gt;</span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/dialog"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dialog</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/hover-card"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">HoverCard</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/drawer","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/dialog/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dialog</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/hover-card/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">HoverCard</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/drawer","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/fieldset.html b/core/fieldset/index.html
similarity index 52%
rename from core/fieldset.html
rename to core/fieldset/index.html
index b14b90acd7b..db1e1c44d9e 100644
--- a/core/fieldset.html
+++ b/core/fieldset/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/fieldset-2cbcd26323df7e0b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Fieldset</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Group related elements in a form</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Fieldset</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Fieldset/Fieldset.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/fieldset.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/fieldset-2cbcd26323df7e0b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Fieldset</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Group related elements in a form</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Fieldset</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Fieldset/Fieldset.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/fieldset.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(31.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><fieldset style="--fieldset-radius:var(--mantine-radius-sm)" class="m-84c9523a m-e9408a47 mantine-Fieldset-root" data-variant="default" radius="sm"><legend class="m-90794832 mantine-Fieldset-legend">Personal information</legend><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rddaddarblu6" id="mantine-Rddaddarblu6-label">Your name</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your name" aria-invalid="false" id="mantine-Rddaddarblu6"/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rldaddarblu6" id="mantine-Rldaddarblu6-label">Email</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Email" aria-invalid="false" id="mantine-Rldaddarblu6"/></div></div></fieldset></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1middarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmiddarblu6" id="mantine-R7dmiddarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R7dmiddarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmiddarblu6" id="mantine-R7dmiddarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7dmiddarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R7dmiddarblu6" id="mantine-R7dmiddarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R7dmiddarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2middarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Fieldset</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -29,4 +29,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Fieldset</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-picker"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/fieldset","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-picker/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/fieldset","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/file-button.html b/core/file-button/index.html
similarity index 56%
rename from core/file-button.html
rename to core/file-button/index.html
index 0e022b47d29..a1daed512bf 100644
--- a/core/file-button.html
+++ b/core/file-button/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/file-button-f1622f7dc65f0f0d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FileButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Open file picker with a button click</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FileButton/FileButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/file-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/file-button-f1622f7dc65f0f0d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FileButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Open file picker with a button click</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FileButton/FileButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/file-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Upload image</span></span></button><input style="display:none" type="file" accept="image/png,image/jpeg"/></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileButton</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -87,4 +87,4 @@
       )}
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/copy-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CopyButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/unstyled-button"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">UnstyledButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/file-button","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/copy-button/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CopyButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/unstyled-button/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">UnstyledButton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/file-button","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/file-input.html b/core/file-input/index.html
similarity index 69%
rename from core/file-input.html
rename to core/file-input/index.html
index acafec99ce0..b84b8e665d2 100644
--- a/core/file-input.html
+++ b/core/file-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/file-input-551f0a01874cdf8d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FileInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture files from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FileInput/FileInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/file-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/file-input-551f0a01874cdf8d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FileInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture files from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FileInput/FileInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/file-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-FileInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-FileInput-label" data-variant="default" data-size="sm" for="mantine-R1l8ldarblu6" id="mantine-R1l8ldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-FileInput-description" data-variant="default" data-size="sm" id="mantine-R1l8ldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-FileInput-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-multiline="true"><button class="m-8fb7ebe7 mantine-Input-input mantine-FileInput-input" data-variant="default" type="button" aria-invalid="false" aria-describedby="mantine-R1l8ldarblu6-description" id="mantine-R1l8ldarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Input placeholder</span></button></div></div><input style="display:none" type="file"/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6q8ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riq8ldarblu6" id="mantine-Riq8ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riq8ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmq8ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmq8ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmq8ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqq8ldarblu6" id="mantine-Rqq8ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rqq8ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ruq8ldarblu6" id="mantine-Ruq8ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Ruq8ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FileInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -102,7 +102,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FileInput</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">FileInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -132,4 +132,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FileInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/fieldset"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Fieldset</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Input</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/file-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/fieldset/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Fieldset</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Input</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/file-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/flex.html b/core/flex/index.html
similarity index 57%
rename from core/flex.html
rename to core/flex/index.html
index a891206fd57..b4e5d15dc3c 100644
--- a/core/flex.html
+++ b/core/flex/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/flex-892ea82bf3fc7ea8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Flex</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements in a flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Flex</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Flex/Flex.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/flex.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/flex-892ea82bf3fc7ea8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Flex</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements in a flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Flex</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Flex/Flex.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/flex.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="gap:var(--mantine-spacing-md);align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;flex-direction:row;background:rgba(0, 0, 0, .3);min-height:calc(3.125rem * var(--mantine-scale))" class="m-8bffd616 mantine-Flex-root __m__-R5addarblu6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 1</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 2</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 3</span></span></button></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1middarblu6-label">Gap</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R2middarblu6" id="mantine-R2middarblu6-label">Justify</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R2middarblu6"><option value="flex-start" selected="">Flex-start</option><option value="center">Center</option><option value="flex-end">Flex-end</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R3middarblu6" id="mantine-R3middarblu6-label">Align</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R3middarblu6"><option value="flex-start" selected="">Flex-start</option><option value="center">Center</option><option value="flex-end">Flex-end</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R4middarblu6" id="mantine-R4middarblu6-label">Direction</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R4middarblu6"><option value="row" selected="">Row</option><option value="column">Column</option><option value="row-reverse">Row-reverse</option><option value="column-reverse">Column-reverse</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R5middarblu6" id="mantine-R5middarblu6-label">Wrap</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R5middarblu6"><option value="wrap" selected="">Wrap</option><option value="nowrap">Nowrap</option><option value="wrap-reverse">Wrap-reverse</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Flex</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -25,7 +25,7 @@
 <div id="supported-props" data-heading="Supported props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#supported-props">Supported props</a></h2>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Prop</th><th class="m-4e7aa4f3 mantine-Table-th">CSS Property</th><th class="m-4e7aa4f3 mantine-Table-th">Theme key</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">gap</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">gap</code></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">rowGap</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">rowGap</code></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">columnGap</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">columnGap</code></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">align</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">alignItems</code></div></td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">justify</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">justifyContent</code></div></td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">wrap</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">flexWrap</code></div></td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">direction</code></td><td class="m-4e7aa4ef mantine-Table-td"><div class="m-8b3717df mantine-Breadcrumbs-root"><code class="m-f678d540 mantine-Breadcrumbs-breadcrumb m-b183c0a2 mantine-Code-root" dir="ltr">flexDirection</code></div></td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr></tbody></table></div></div></div>
 <div id="responsive-props" data-heading="Responsive props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-props">Responsive props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Flex</code> component props can have responsive values the same way as other <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Flex</code> component props can have responsive values the same way as other <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-R1bldarblu6{gap:var(--mantine-spacing-sm);flex-direction:column;}@media(min-width: 48em){.__m__-R1bldarblu6{gap:var(--mantine-spacing-lg);justify-content:center;flex-direction:row;}}</style><div class="m-8bffd616 mantine-Flex-root __m__-R1bldarblu6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 1</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 2</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 3</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Flex</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -40,4 +40,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>&gt;</span>Button 3<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Flex</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Container</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/grid"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Grid</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/flex","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/container/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Container</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/grid/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Grid</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/flex","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/focus-trap.html b/core/focus-trap/index.html
similarity index 54%
rename from core/focus-trap.html
rename to core/focus-trap/index.html
index fdc6deebe27..b000ac0eaa4 100644
--- a/core/focus-trap.html
+++ b/core/focus-trap/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/focus-trap-16614a71ce652aeb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FocusTrap</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Trap focus at child node</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FocusTrap</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FocusTrap/FocusTrap.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/focus-trap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">FocusTrap is a component implementation of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap">use-focus-trap</a> hook,
-it is used in all Mantine components that require focus trap (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>, etc.).</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/focus-trap-16614a71ce652aeb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">FocusTrap</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Trap focus at child node</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">FocusTrap</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/FocusTrap/FocusTrap.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/focus-trap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">FocusTrap is a component implementation of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap/">use-focus-trap</a> hook,
+it is used in all Mantine components that require focus trap (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>, etc.).</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Activate<!-- --> focus trap</span></span></button><div><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R3baldarblu6" id="mantine-R3baldarblu6-label">First input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="First input" aria-invalid="false" id="mantine-R3baldarblu6"/></div></div><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R5baldarblu6" id="mantine-R5baldarblu6-label">Second input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Second input" aria-invalid="false" id="mantine-R5baldarblu6"/></div></div><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R7baldarblu6" id="mantine-R7baldarblu6-label">Third input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Third input" aria-invalid="false" id="mantine-R7baldarblu6"/></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">FocusTrap</span>, <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -55,4 +55,4 @@
 <li class="MdxTypography_li__JpNrx">If there are no elements with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code> attribute, then the first element that supports keyboard interaction is focused</li>
 <li class="MdxTypography_li__JpNrx">If the target element does not have focusable elements or does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code>, then the focus trap will not work</li>
 <li class="MdxTypography_li__JpNrx">Trap stops working when element outside of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">FocusTrap</code> child is focused</li>
-</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/divider"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Divider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/paper"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Paper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/focus-trap","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/divider/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Divider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/paper/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Paper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/focus-trap","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/grid.html b/core/grid/index.html
similarity index 73%
rename from core/grid.html
rename to core/grid/index.html
index a7ca12bdb3a..322f48bdb84 100644
--- a/core/grid.html
+++ b/core/grid/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/grid-8bdd544306ab120e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Grid</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive grid system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Grid/Grid.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/grid.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/grid-8bdd544306ab120e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Grid</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive grid system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Grid/Grid.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/grid.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-Ragddarblu6{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m-410352e9 mantine-Grid-root __m__-Ragddarblu6"><div class="m-dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-R1mqgddarblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R1mqgddarblu6"><div class="m-548ba23a"><div class="m-60a4592e">1</div></div></div><style data-mantine-styles="inline">.__m__-R2mqgddarblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R2mqgddarblu6"><div class="m-548ba23a"><div class="m-60a4592e">2</div></div></div><style data-mantine-styles="inline">.__m__-R3mqgddarblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R3mqgddarblu6"><div class="m-548ba23a"><div class="m-60a4592e">3</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -27,7 +27,7 @@
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">span</code> prop also supports object syntax to change column width based on viewport width,
 it accepts <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sm</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xl</code> keys and values from 1 to 12. The syntax
-is the same as in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>.</p>
+is the same as in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">In the following example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">span={{ base: 12, md: 6, lg: 3 }}</code>:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">base</code> – 12 / 12 = 100% of row width when viewport width is less than <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code> breakpoint</li>
@@ -48,7 +48,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="gutter" data-heading="Gutter" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gutter">Gutter</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gutter</code> prop to control spacing between columns. The prop works the same
-way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a> – you can reference <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code> values
+way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a> – you can reference <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing</code> values
 with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sm</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xl</code> strings and use object syntax to change gutter
 based on viewport width:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-Raj5darblu6{--grid-gutter:calc(0.3125rem * var(--mantine-scale));}@media(min-width: 36em){.__m__-Raj5darblu6{--grid-gutter:var(--mantine-spacing-md);}}@media(min-width: 62em){.__m__-Raj5darblu6{--grid-gutter:var(--mantine-spacing-xl);}}@media(min-width: 88em){.__m__-Raj5darblu6{--grid-gutter:calc(3.125rem * var(--mantine-scale));}}</style><div class="m-410352e9 mantine-Grid-root __m__-Raj5darblu6"><div class="m-dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-R1mqj5darblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R1mqj5darblu6"><div class="m-548ba23a"><div class="m-60a4592e">1</div></div></div><style data-mantine-styles="inline">.__m__-R2mqj5darblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R2mqj5darblu6"><div class="m-548ba23a"><div class="m-60a4592e">2</div></div></div><style data-mantine-styles="inline">.__m__-R3mqj5darblu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}</style><div class="m-96bdd299 mantine-Grid-col __m__-R3mqj5darblu6"><div class="m-548ba23a"><div class="m-60a4592e">3</div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -173,4 +173,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Grid.Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{6}</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">Grid.Col</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Grid</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Flex</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/group"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Group</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/grid","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/flex/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Flex</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/group/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Group</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/grid","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/group.html b/core/group/index.html
similarity index 58%
rename from core/group.html
rename to core/group/index.html
index 8e9289ba4dc..a28b37403db 100644
--- a/core/group.html
+++ b/core/group/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/group-ab5178f5d9000411.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Group</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements and components in a horizontal flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Group/Group.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/group.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> is a horizontal flex container. If you need a vertical flex container, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stack">Stack</a>
-component instead. If you need to have full control over flex container properties, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/flex">Flex</a> component.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/group-ab5178f5d9000411.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Group</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements and components in a horizontal flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Group/Group.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/group.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> is a horizontal flex container. If you need a vertical flex container, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/stack/">Stack</a>
+component instead. If you need to have full control over flex container properties, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/flex/">Flex</a> component.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-gap:var(--mantine-spacing-md);--group-justify:flex-start" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">First</span></span></button><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Second</span></span></button><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Third</span></span></button></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R3d4ldarblu6" id="mantine-R3d4ldarblu6-label">Justify</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R3d4ldarblu6"><option value="flex-start" selected="">Flex-start</option><option value="center">Center</option><option value="space-between">Space-between</option><option value="flex-end">Flex-end</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Gap</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R7d4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R7d4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R7d4ldarblu6">Grow</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -72,4 +72,4 @@
     &lt;/<span class="hljs-title class_">Group</span>&gt;
   );
 }</code></pre></div></div></div></div>
-<div id="browser-support" data-heading="Browser support" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#browser-support">Browser support</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> uses<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://caniuse.com/flexbox-gap">flexbox gap</a> to add spacing between children. In older browsers, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> children may not have spacing. You can install PostCSS<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/gavinmcfarland/flex-gap-polyfill">flex-gap-polyfill</a> <!-- -->to add support for older browsers.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/grid"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Grid</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/simple-grid"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SimpleGrid</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/group","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div id="browser-support" data-heading="Browser support" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#browser-support">Browser support</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> uses<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://caniuse.com/flexbox-gap">flexbox gap</a> to add spacing between children. In older browsers, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Group</code> children may not have spacing. You can install PostCSS<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/gavinmcfarland/flex-gap-polyfill">flex-gap-polyfill</a> <!-- -->to add support for older browsers.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/grid/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Grid</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/simple-grid/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SimpleGrid</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/group","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/highlight.html b/core/highlight/index.html
similarity index 59%
rename from core/highlight.html
rename to core/highlight/index.html
index dc638a64cd5..08d80bb3e62 100644
--- a/core/highlight.html
+++ b/core/highlight/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/highlight-fb9dbf4ad91d443e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Highlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight given part of a string with mark</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Highlight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Highlight/Highlight.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/highlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/highlight-fb9dbf4ad91d443e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Highlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight given part of a string with mark</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Highlight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Highlight/Highlight.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/highlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use Highlight component to highlight a substring in a given string with a mark tag.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Pass the main string as children to Highlight component and string part that should be highlighted to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlight</code> prop.
 If the main string does not include <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlight</code> part, it will be ignored.
@@ -25,7 +25,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Highlight</span> <span class="hljs-attr">highlight</span>=<span class="hljs-string">{[</span>&#x27;<span class="hljs-attr">this</span>&#x27;, &#x27;<span class="hljs-attr">that</span>&#x27;]}&gt;</span>Highlight this and also that<span class="hljs-tag">&lt;/<span class="hljs-name">Highlight</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-highlight-styles" data-heading="Change highlight styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-highlight-styles">Change highlight styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Default <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/mark">Mark</a> styles can be overwritten with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlightStyles</code> prop, it accepts either a function with a subscription to theme
+<p class="MdxTypography_paragraph__Lp7wh">Default <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/mark/">Mark</a> styles can be overwritten with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">highlightStyles</code> prop, it accepts either a function with a subscription to theme
 or an object with styles:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root mantine-Highlight-root"><span>You can change styles of </span><mark style="--mark-bg-dark:var(--mantine-color-yellow-5);--mark-bg-light:var(--mantine-color-yellow-2);background-image:linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5));font-weight:700;-webkit-background-clip:text;-webkit-text-fill-color:transparent" class="m-bcb3f3c2 mantine-Mark-root" data-highlight="highlighted">highlighted</mark><span> part if you do not like </span><mark style="--mark-bg-dark:var(--mantine-color-yellow-5);--mark-bg-light:var(--mantine-color-yellow-2);background-image:linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5));font-weight:700;-webkit-background-clip:text;-webkit-text-fill-color:transparent" class="m-bcb3f3c2 mantine-Mark-root" data-highlight="default">default</mark><span> styles</span></p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Highlight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -47,7 +47,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="text-props" data-heading="Text props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#text-props">Text props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Highlight is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component, all its props are available:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Highlight is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component, all its props are available:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><a style="color:var(--mantine-color-anchor);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root mantine-Highlight-root" href="https://mantine.dev" target="_blank"><mark style="--mark-bg-dark:var(--mantine-color-yellow-5);--mark-bg-light:var(--mantine-color-yellow-2)" class="m-bcb3f3c2 mantine-Mark-root" data-highlight="Mantine">Mantine</mark><span> website</span></a></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Highlight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -63,4 +63,4 @@
       Mantine website
     <span class="hljs-tag">&lt;/<span class="hljs-name">Highlight</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Code</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/list"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">List</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/highlight","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/code/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Code</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/list/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">List</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/highlight","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/hover-card.html b/core/hover-card/index.html
similarity index 61%
rename from core/hover-card.html
rename to core/hover-card/index.html
index aa3f3386094..548fa1b8c12 100644
--- a/core/hover-card.html
+++ b/core/hover-card/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/hover-card-d3b3454d7ebb9dff.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">HoverCard</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display popover section when target element is hovered</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">HoverCard</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/HoverCard/HoverCard.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/hover-card.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/hover-card-d3b3454d7ebb9dff.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">HoverCard</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display popover section when target element is hovered</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">HoverCard</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/HoverCard/HoverCard.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/hover-card.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R3d8ddarblu6-dropdown" id="mantine-R3d8ddarblu6-target"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Hover to reveal the card</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">HoverCard</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -177,4 +177,4 @@
 }</code></pre></div></div></div></div>
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">HoverCard</code> 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.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/drawer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Drawer</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loading-overlay"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">LoadingOverlay</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/hover-card","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+that is not required to understand the context.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/drawer/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Drawer</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loading-overlay/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">LoadingOverlay</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/hover-card","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/image.html b/core/image/index.html
similarity index 56%
rename from core/image.html
rename to core/image/index.html
index 35ce8adc432..29d22f3b1de 100644
--- a/core/image.html
+++ b/core/image/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/image-f988d992e3028dbf.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Image</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Image with optional fallback</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Image/Image.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/image.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/image-f988d992e3028dbf.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Image</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Image with optional fallback</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Image/Image.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/image.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Image</code> is a wrapper for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">img</code> with minimal styles. By default, the image
 will take 100% of parent width. The image size can be controlled with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code>
-and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>.</p>
+and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><img style="--image-radius:var(--mantine-radius-md)" class="m-9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1688920556232-321bd176d0b4?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=2370&amp;q=80"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -19,7 +19,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="image-height" data-heading="Image height" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#image-height">Image height</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">In most case, you will need to set image height to prevent layout jumps when
-image is loading. You can do so with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>.</p>
+image is loading. You can do so with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><img style="--image-radius:var(--mantine-radius-md);height:calc(12.5rem * var(--mantine-scale))" class="m-9e117634 mantine-Image-root" src="https://images.unsplash.com/photo-1688920556232-321bd176d0b4?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=2370&amp;q=80"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -62,7 +62,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="usage-with-nextjs-image" data-heading="Usage with Next.js Image" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage-with-nextjs-image">Usage with Next.js Image</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Image</code> component is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a>, its root element can be changed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Image</code> component is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a>, its root element can be changed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop.
 You can use it with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">next/image</code> and other similar components.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-title class_">NextImage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;next/image&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Image</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -70,4 +70,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Image</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{NextImage}</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{myImage}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;My image&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-swatch"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorSwatch</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/indicator"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Indicator</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/image","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/color-swatch/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ColorSwatch</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/indicator/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Indicator</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/image","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/indicator.html b/core/indicator/index.html
similarity index 63%
rename from core/indicator.html
rename to core/indicator/index.html
index b32bcb29b66..350149c0078 100644
--- a/core/indicator.html
+++ b/core/indicator/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/indicator-be8a0627db682baa.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Indicator</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display element at the corner of another element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Indicator/Indicator.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/indicator.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/indicator-be8a0627db682baa.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Indicator</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display element at the corner of another element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Indicator/Indicator.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/indicator.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--indicator-color:var(--mantine-color-blue-filled);--indicator-size:calc(0.625rem * var(--mantine-scale));--indicator-radius:var(--mantine-radius-xl);--indicator-top:0;--indicator-right:0;--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div class="m-760d1fb1 mantine-Indicator-indicator"></div><div style="--avatar-size:var(--avatar-size-lg);--avatar-radius:var(--mantine-radius-sm)" class="m-f85678b6 mantine-Avatar-root" data-size="lg"><img class="m-11f8ac07 mantine-Avatar-image" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=250&amp;q=80"/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atjd4ddarblu6-dropdown" id="mantine-R7atjd4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R5d4ddarblu6" id="mantine-R5d4ddarblu6-label">Position</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R5d4ddarblu6"><option value="top-start">Top-start</option><option value="top-center">Top-center</option><option value="top-end" selected="">Top-end</option><option value="middle-start">Middle-start</option><option value="middle-center">Middle-center</option><option value="middle-end">Middle-end</option><option value="bottom-start">Bottom-start</option><option value="bottom-center">Bottom-center</option><option value="bottom-end">Bottom-end</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(100% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:100%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="100"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R9d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(16.666666666666664% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:16.666666666666664%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="30" aria-valuemin="6" aria-valuenow="10"></div><div></div></div></div><input type="hidden" value="10"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ddarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rdd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rdd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rdd4ddarblu6">With border</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rfd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rfd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rfd4ddarblu6">Processing</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span>, <span class="hljs-title class_">Avatar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -58,4 +58,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;lg&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./avatar.png&quot;</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Indicator</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/image"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Image</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/kbd"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Kbd</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/indicator","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/image/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Image</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/kbd/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Kbd</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/indicator","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/input.html b/core/input/index.html
similarity index 80%
rename from core/input.html
rename to core/input/index.html
index 845a1669985..ca25c789284 100644
--- a/core/input.html
+++ b/core/input/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/8015-669307b9cf02b7fe.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/input-1b125b6fb4c0178d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Input</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component to create custom inputs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Input/Input.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="disclaimer" data-heading="Disclaimer" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#disclaimer">Disclaimer</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/8015-669307b9cf02b7fe.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/input-1b125b6fb4c0178d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Input</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component to create custom inputs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Input/Input.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="disclaimer" data-heading="Disclaimer" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#disclaimer">Disclaimer</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><strong>!important:</strong> In most cases, you should not use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> in your application.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> is a base for other inputs and was not designed to be used directly.
-Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> to create custom inputs, for other cases prefer <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>
+Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> to create custom inputs, for other cases prefer <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>
 or other component.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -25,7 +25,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Input label&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;Input description&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> component is used as base for some other inputs (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea">Textarea</a>, etc.).
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> component is used as base for some other inputs (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select/">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea/">Textarea</a>, etc.).
 The purpose of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> is to provide shared styles and features to other inputs.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input" data-variant="default" placeholder="Input component" aria-invalid="false"/></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkhddarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkhddarblu6" id="mantine-R3mdkhddarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkhddarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkhddarblu6" id="mantine-R3mdkhddarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkhddarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkhddarblu6" id="mantine-R3mdkhddarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkhddarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkhddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkhddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R15khddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R15khddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R15khddarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkhddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkhddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkhddarblu6">Error</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -66,7 +66,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-input-element" data-heading="Change input element" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-input-element">Change input element</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Input is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a>, the default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code>,
+<p class="MdxTypography_paragraph__Lp7wh">Input is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a>, the default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code>,
 but it can be changed to any other element or component.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Example of using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">select</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper" data-variant="default" data-pointer="true"><button class="m-8fb7ebe7 mantine-Input-input" data-variant="default" aria-invalid="false">Button input</button></div><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;margin-top:var(--mantine-spacing-md)" class="m-6c018570 mantine-Input-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input" data-variant="default" aria-invalid="false"><option value="1">1</option><option value="2">2</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down"><path d="M6 9l6 6l6 -6"></path></svg></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -100,7 +100,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="inputwrapper-component" data-heading="Input.Wrapper component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#inputwrapper-component">Input.Wrapper component</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> component is used in all other inputs
-(<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea">Textarea</a>, etc.)
+(<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select/">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea/">Textarea</a>, etc.)
 under the hood, you <em>do not need to wrap your inputs with it, as it is already included in all of them</em>.
 Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> only when you want to create custom inputs.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(27.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label" data-size="sm" for="mantine-R1akldarblu6" id="mantine-R1akldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description" data-size="sm" id="mantine-R1akldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-margin-bottom:calc(var(--mantine-spacing-xs) / 2);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input" data-variant="default" placeholder="Input inside Input.Wrapper" aria-invalid="false" aria-describedby="mantine-R1akldarblu6-error mantine-R1akldarblu6-description" id="mantine-R1akldarblu6"/></div><p style="--input-error-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-8f816625 mantine-InputWrapper-error" data-size="sm" id="mantine-R1akldarblu6-error">Input error</p></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdkkldarblu6" id="mantine-Rdkkldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdkkldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rlkkldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rlkkldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rlkkldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rtkkldarblu6" id="mantine-Rtkkldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rtkkldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kkldarblu6" id="mantine-R15kkldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kkldarblu6" value="Input error"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1dkkldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -141,7 +141,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="inputcontainer" data-heading="inputContainer" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#inputcontainer">inputContainer</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">With <code class="m-b183c0a2 mantine-Code-root" dir="ltr">inputContainer</code> prop, you can enhance inputs that use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> under the hood,
-for example, you can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a> when
+for example, you can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a> when
 the input is focused:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ram5darblu6" id="mantine-Ram5darblu6-label">TextInput with tooltip</label><p class="m-fe47ce59 mantine-InputWrapper-description mantine-TextInput-description" id="mantine-Ram5darblu6-description">Tooltip will be relative to the input</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Focus me to see tooltip" aria-invalid="false" aria-describedby="mantine-Ram5darblu6-description" id="mantine-Ram5darblu6"/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Tooltip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -168,7 +168,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">All components that are based on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">required</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withAsterisk</code> props.
 When set to true, both of these props will add a red asterisk to the end of the label.
 The only difference is whether input element will have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">required</code> attribute, example with
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a> component:</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a> component:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-comment">// Will display required asterisk and add `required` attribute to the input element</span>
@@ -243,9 +243,9 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="default-props-on-theme" data-heading="Default props on theme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-props-on-theme">Default props on theme</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>
+<p class="MdxTypography_paragraph__Lp7wh">You can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>
 to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> components. These default props will be inherited by all inputs
-that use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> under the hood (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea">Textarea</a>, etc.):</p>
+that use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> under the hood (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select/">NativeSelect</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea/">Textarea</a>, etc.):</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqptdarblu6" id="mantine-Rqptdarblu6-label">Text input</label><div style="--input-margin-bottom:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="filled"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="filled" placeholder="Text input" aria-invalid="false" aria-describedby="mantine-Rqptdarblu6-description" id="mantine-Rqptdarblu6"/></div><p class="m-fe47ce59 mantine-InputWrapper-description mantine-TextInput-description" id="mantine-Rqptdarblu6-description">Description below the input</p></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R1aptdarblu6" id="mantine-R1aptdarblu6-label">Native select</label><div style="--input-margin-bottom:calc(var(--mantine-spacing-xs) / 2);--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="filled" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="filled" placeholder="Native select" aria-invalid="false" aria-describedby="mantine-R1aptdarblu6-description" id="mantine-R1aptdarblu6"><option value="React">React</option><option value="Angular">Angular</option><option value="Vue">Vue</option><option value="Svelte">Svelte</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><p class="m-fe47ce59 mantine-InputWrapper-description mantine-NativeSelect-description" id="mantine-R1aptdarblu6-description">Description below the input</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">NativeSelect</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -284,8 +284,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="styles-on-theme" data-heading="Styles on theme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-on-theme">Styles on theme</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Same as with default props, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>
-on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> to add styles to all inputs:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Same as with default props, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>
+on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> to add styles to all inputs:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8ccacaf5 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqqldarblu6" id="mantine-Rqqldarblu6-label">Text input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8ca6a3cb m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Text input" aria-invalid="false" id="mantine-Rqqldarblu6"/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8ccacaf5 m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R1aqldarblu6" id="mantine-R1aqldarblu6-label">Native select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8ca6a3cb m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Native select" aria-invalid="false" id="mantine-R1aqldarblu6"><option value="React">React</option><option value="Angular">Angular</option><option value="Vue">Vue</option><option value="Svelte">Svelte</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">NativeSelect</span>, <span class="hljs-title class_">MantineThemeProvider</span>, createTheme, <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -321,8 +321,8 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-focus-styles" data-heading="Change focus styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-focus-styles">Change focus styles</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&amp;:focus-within</code> selector to change inputs focus styles. You can apply these styles to
-one component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop or to all inputs with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>
-on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>.</p>
+one component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop or to all inputs with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>
+on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper" data-variant="default"><input class="m-4ba3a790 m-8fb7ebe7 mantine-Input-input" data-variant="default" placeholder="Regular Input component" aria-invalid="false"/></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1arddarblu6" id="mantine-R1arddarblu6-label">TextInput component</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-4ba3a790 m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="TextInput component" aria-invalid="false" id="mantine-R1arddarblu6"/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.input</span> {
   <span class="hljs-attribute">transition</span>: none;
 
@@ -355,7 +355,7 @@
   );
 }</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> components support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> –
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input.Wrapper</code> components support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> –
 you can customize styles of any inner element with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> props.</p>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Input</code> Styles API selectors:</p>
 <style>/*
@@ -409,7 +409,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Input.Wrapper</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-id">use-id</a> to generate unique ids:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-id/">use-id</a> to generate unique ids:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -420,4 +420,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{id}</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Input.Wrapper</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/json-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">JsonInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/json-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">JsonInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/json-input.html b/core/json-input/index.html
similarity index 64%
rename from core/json-input.html
rename to core/json-input/index.html
index 6a568605b01..92fd809ce71 100644
--- a/core/json-input.html
+++ b/core/json-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/json-input-8393e299acdc0341.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">JsonInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture json data from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">JsonInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/JsonInput/JsonInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/json-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea">Textarea</a> component,
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/json-input-8393e299acdc0341.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">JsonInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture json data from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">JsonInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/JsonInput/JsonInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/json-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/textarea/">Textarea</a> component,
 it includes json validation logic and option to format input value on blur:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class="m-46b77525 mantine-InputWrapper-root mantine-JsonInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-JsonInput-label" for="mantine-R2kldarblu6" id="mantine-R2kldarblu6-label">Your package.json</label><div class="m-6c018570 mantine-Input-wrapper mantine-JsonInput-wrapper" data-variant="default" data-multiline="true"><textarea class="m-8fb7ebe7 mantine-Input-input mantine-JsonInput-input" data-variant="default" placeholder="Textarea will autosize to fit the content" autoComplete="off" data-monospace="true" data-no-overflow="true" aria-invalid="false" id="mantine-R2kldarblu6"></textarea></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">JsonInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -29,7 +29,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">JsonInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setValue}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">textarea</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">textarea</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-JsonInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-JsonInput-label" data-variant="default" data-size="sm" for="mantine-Raltdarblu6" id="mantine-Raltdarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-JsonInput-description" data-variant="default" data-size="sm" id="mantine-Raltdarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-padding-y:var(--input-padding-y-sm)" class="m-6c018570 mantine-Input-wrapper mantine-JsonInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><textarea class="m-8fb7ebe7 mantine-Input-input mantine-JsonInput-input" data-variant="default" placeholder="Input placeholder" autoComplete="off" data-monospace="true" aria-invalid="false" aria-describedby="mantine-Raltdarblu6-description" id="mantine-Raltdarblu6"></textarea></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d5tdarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5tdarblu6" id="mantine-Rtjd5tdarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd5tdarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5tdarblu6" id="mantine-Rtjd5tdarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd5tdarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5tdarblu6" id="mantine-Rtjd5tdarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd5tdarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d5tdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d5tdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d5tdarblu6" id="mantine-R9d5tdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d5tdarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd5tdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd5tdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd5tdarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd5tdarblu6" id="mantine-Rdd5tdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd5tdarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd5tdarblu6" id="mantine-Rfd5tdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd5tdarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">JsonInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -49,7 +49,7 @@
     <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">JsonInput</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">&#x27;{ &quot;a&quot;: 1, &quot;B&quot;: 2 }&#x27;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Disabled&quot;</span> /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">JsonInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -79,4 +79,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">JsonInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Input</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/native-select"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NativeSelect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/json-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Input</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/native-select/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NativeSelect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/json-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/kbd.html b/core/kbd.html
deleted file mode 100644
index 3ae6de8314a..00000000000
--- a/core/kbd.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Kbd | Mantine</title><meta name="description" content="Display keyboard key"/><meta name="og:title" content="Kbd | Mantine"/><meta name="og:description" content="Display keyboard key"/><meta name="twitter:title" content="Kbd | Mantine"/><meta name="twitter:description" content="Display keyboard key"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/kbd-d240fc4be69b7406.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Kbd</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display keyboard key</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Kbd</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Kbd/Kbd.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/kbd.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><kbd class="m-dc6f14e2 mantine-Kbd-root">⌘</kbd> + <kbd class="m-dc6f14e2 mantine-Kbd-root">Shift</kbd> + <kbd class="m-dc6f14e2 mantine-Kbd-root">M</kbd></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Kbd</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>⌘<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span> + <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>Shift<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span> + <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>M<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Indicator</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/spoiler"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spoiler</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/kbd","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/kbd/index.html b/core/kbd/index.html
new file mode 100644
index 00000000000..d7c202399cd
--- /dev/null
+++ b/core/kbd/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Kbd | Mantine</title><meta name="description" content="Display keyboard key"/><meta name="og:title" content="Kbd | Mantine"/><meta name="og:description" content="Display keyboard key"/><meta name="twitter:title" content="Kbd | Mantine"/><meta name="twitter:description" content="Display keyboard key"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/kbd-d240fc4be69b7406.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Kbd</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display keyboard key</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Kbd</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Kbd/Kbd.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/kbd.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><kbd class="m-dc6f14e2 mantine-Kbd-root">⌘</kbd> + <kbd class="m-dc6f14e2 mantine-Kbd-root">Shift</kbd> + <kbd class="m-dc6f14e2 mantine-Kbd-root">M</kbd></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Kbd</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>⌘<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span> + <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>Shift<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span> + <span class="hljs-tag">&lt;<span class="hljs-name">Kbd</span>&gt;</span>M<span class="hljs-tag">&lt;/<span class="hljs-name">Kbd</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/indicator/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Indicator</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/spoiler/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spoiler</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/kbd","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/list.html b/core/list/index.html
similarity index 60%
rename from core/list.html
rename to core/list/index.html
index abd2a5ba6e0..8a322a67190 100644
--- a/core/list.html
+++ b/core/list/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/list-8376dd80ed78ec4b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">List</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display ordered or unordered list</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">List</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/List/List.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/list.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/list-8376dd80ed78ec4b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">List</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display ordered or unordered list</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">List</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/List/List.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/list.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><ul style="--list-fz:var(--mantine-font-size-md);--list-lh:var(--mantine-line-height-md)" class="m-abbac491 mantine-List-root" data-size="md"><li class="m-abb6bec2 mantine-List-item"><div class="m-75cd9f71 mantine-List-itemWrapper"><span class="mantine-List-itemLabel">Clone or download repository from GitHub</span></div></li><li class="m-abb6bec2 mantine-List-item"><div class="m-75cd9f71 mantine-List-itemWrapper"><span class="mantine-List-itemLabel">Install dependencies with yarn</span></div></li><li class="m-abb6bec2 mantine-List-item"><div class="m-75cd9f71 mantine-List-itemWrapper"><span class="mantine-List-itemLabel">To start development server run npm start command</span></div></li><li class="m-abb6bec2 mantine-List-item"><div class="m-75cd9f71 mantine-List-itemWrapper"><span class="mantine-List-itemLabel">Run tests to make sure your changes do not break the build</span></div></li><li class="m-abb6bec2 mantine-List-item"><div class="m-75cd9f71 mantine-List-itemWrapper"><span class="mantine-List-itemLabel">Submit a pull request once you are done</span></div></li></ul></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Type</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rerd4ddarblu6" id="mantine-Rerd4ddarblu6-unordered" data-focus-ring="auto" checked="" value="unordered"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rerd4ddarblu6-unordered">Unordered</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rerd4ddarblu6" id="mantine-Rerd4ddarblu6-ordered" data-focus-ring="auto" value="ordered"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rerd4ddarblu6-ordered">Ordered</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R7d4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R7d4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R7d4ddarblu6">With padding</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">List</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -84,4 +84,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">List.Item</span>&gt;</span>First order item<span class="hljs-tag">&lt;/<span class="hljs-name">List.Item</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">List</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/highlight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Highlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/mark"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Mark</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/list","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/highlight/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Highlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/mark/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Mark</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/list","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/loader.html b/core/loader/index.html
similarity index 62%
rename from core/loader.html
rename to core/loader/index.html
index 7c0cf78d236..86e24697c0f 100644
--- a/core/loader.html
+++ b/core/loader/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/loader-2eed1da239664aeb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Loader</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Indicate loading state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Loader/Loader.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/loader.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/loader-2eed1da239664aeb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Loader</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Indicate loading state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Loader/Loader.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/loader.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Loader</code> component supports 3 types of loaders: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">oval</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">bars</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dots</code> by default. All
 loaders are animated with CSS for better performance.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><span style="--loader-size:var(--loader-size-md);--loader-color:var(--mantine-color-blue-filled)" class="m-b34414df m-5ae2e3c mantine-Loader-root" data-size="md"></span></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ldarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R3lerd4ldarblu6-dropdown" id="mantine-R3lerd4ldarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ldarblu6-label">Type</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Revd4ldarblu6" id="mantine-Revd4ldarblu6-oval" data-focus-ring="auto" checked="" value="oval"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Revd4ldarblu6-oval">Oval</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Revd4ldarblu6" id="mantine-Revd4ldarblu6-bars" data-focus-ring="auto" value="bars"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Revd4ldarblu6-bars">Bars</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Revd4ldarblu6" id="mantine-Revd4ldarblu6-dots" data-focus-ring="auto" value="dots"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Revd4ldarblu6-dots">Dots</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -13,7 +13,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="size-prop" data-heading="Size prop" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#size-prop">Size prop</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can pass any valid CSS values and numbers to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop. Numbers are treated as px, but
-converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a>. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size={32}</code> will produce
+converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a>. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size={32}</code> will produce
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--loader-size: 2rem</code> CSS variable.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-min-height:calc(4.375rem * var(--mantine-scale))" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><span style="--loader-size:calc(1.875rem * var(--mantine-scale))" class="m-b34414df m-5ae2e3c mantine-Loader-root"></span></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d5ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="50" aria-valuemin="10" aria-valuenow="30"></div><div></div></div></div><input type="hidden" value="30"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Loader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -21,9 +21,9 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Loader</span> <span class="hljs-attr">size</span>=<span class="hljs-string">{30}</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="adding-custom-loaders" data-heading="Adding custom loaders" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#adding-custom-loaders">Adding custom loaders</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Loader</code> component is used in other components (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay">LoadingOverlay</a>, etc.).
-You can change loader type with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code>.
-You can also add a custom CSS or SVG loader with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaders</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default prop</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Loader</code> component is used in other components (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay/">LoadingOverlay</a>, etc.).
+You can change loader type with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code>.
+You can also add a custom CSS or SVG loader with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaders</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default prop</a>.</p>
 <div id="custom-css-only-loader" data-heading="Custom CSS only loader" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-css-only-loader">Custom CSS only loader</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh">Note that in order for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> props to work with custom loaders, you need to
 use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--loader-size</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--loader-color</code> CSS variables in your loader styles.</p>
@@ -78,4 +78,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Loader</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/alert"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Alert</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/notification"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notification</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/loader","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/alert/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Alert</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/notification/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notification</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/loader","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/loading-overlay.html b/core/loading-overlay/index.html
similarity index 60%
rename from core/loading-overlay.html
rename to core/loading-overlay/index.html
index 152b09cd3c7..2254b3b1186 100644
--- a/core/loading-overlay.html
+++ b/core/loading-overlay/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/core/loading-overlay-4b61a17d71713d8c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">LoadingOverlay</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">An overlay with centered loader</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">LoadingOverlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/LoadingOverlay/LoadingOverlay.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/loading-overlay.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/core/loading-overlay-4b61a17d71713d8c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">LoadingOverlay</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">An overlay with centered loader</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">LoadingOverlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/LoadingOverlay/LoadingOverlay.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/loading-overlay.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">LoadingOverlay</code> 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.</p>
@@ -29,7 +29,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loader-props" data-heading="Loader props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loader-props">Loader props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can pass props down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader">Loader</a> component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can pass props down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loader/">Loader</a> component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loaderProps</code>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="position:relative" class=""><div style="--lo-z-index:1000" class="m-6e45937b mantine-LoadingOverlay-root"><span style="--loader-color:var(--mantine-color-pink-filled)" class="m-7a2bd4cd m-e8eb006c mantine-LoadingOverlay-loader m-5ae2e3c mantine-Loader-root"><span class="m-870bb79"></span><span class="m-870bb79"></span><span class="m-870bb79"></span></span><div style="--overlay-bg:rgba(255, 255, 255, 0.75);--overlay-filter:blur(calc(0.125rem * var(--mantine-scale)));--overlay-radius:var(--mantine-radius-sm);--overlay-z-index:200" class="m-df587f17 mantine-LoadingOverlay-overlay m-9814e45f mantine-Overlay-root" data-light="true"></div><div style="--overlay-bg:rgba(44, 46, 51, 0.75);--overlay-filter:blur(calc(0.125rem * var(--mantine-scale)));--overlay-radius:var(--mantine-radius-sm);--overlay-z-index:200" class="m-df587f17 mantine-LoadingOverlay-overlay m-9814e45f mantine-Overlay-root" data-dark="true"></div></div><div style="--paper-shadow:var(--mantine-shadow-sm);position:relative;background-color:var(--mantine-color-body);padding:var(--mantine-spacing-lg)" class="m-1b7284a3 mantine-Paper-root"><form><div style="--group-child-width:calc(50% - (var(--mantine-spacing-md) - var(--mantine-spacing-md) / 2))" class="m-4081bf90 mantine-Group-root" data-grow="true"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-Rd5dbbldarblu6" id="mantine-Rd5dbbldarblu6-label">First name<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" data-autofocus="true" placeholder="Your first name" required="" aria-invalid="false" id="mantine-Rd5dbbldarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-Rl5dbbldarblu6" id="mantine-Rl5dbbldarblu6-label">Last name<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your last name" required="" aria-invalid="false" id="mantine-Rl5dbbldarblu6" value=""/></div></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R7dbbldarblu6" id="mantine-R7dbbldarblu6-label">Email<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-TextInput-section"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-at"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"></path></svg></div><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your email" required="" aria-invalid="false" id="mantine-R7dbbldarblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-required="true" for="mantine-R9dbbldarblu6" id="mantine-R9dbbldarblu6-label">Password<span class="m-78a94662 mantine-InputWrapper-required mantine-PasswordInput-required" aria-hidden="true"> *</span></label><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-with-right-section="true" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input required="" data-with-left-section="true" class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-R9dbbldarblu6" placeholder="Password" autoComplete="off" type="password" value=""/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-required="true" for="mantine-Rbdbbldarblu6" id="mantine-Rbdbbldarblu6-label">Confirm Password<span class="m-78a94662 mantine-InputWrapper-required mantine-PasswordInput-required" aria-hidden="true"> *</span></label><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-with-right-section="true" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input required="" data-with-left-section="true" class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-Rbdbbldarblu6" placeholder="Confirm password" autoComplete="off" type="password" value=""/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><div style="margin-top:var(--mantine-spacing-xl)" class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rddbbldarblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"><label class="m-8ee546b8 mantine-Checkbox-label" for="mantine-Rddbbldarblu6">I agree to sell my soul and privacy to this corporation</label></div></div></div></form></div></div><div style="--group-justify:center;margin-top:var(--mantine-spacing-xl)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle overlay</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">LoadingOverlay</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -54,4 +54,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/hover-card"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">HoverCard</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/menu"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Menu</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/loading-overlay","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/hover-card/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">HoverCard</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/menu/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Menu</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/loading-overlay","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/mark.html b/core/mark/index.html
similarity index 51%
rename from core/mark.html
rename to core/mark/index.html
index 09a469b8dfc..dbc4354d415 100644
--- a/core/mark.html
+++ b/core/mark/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/mark-ffe8bf0434c03f92.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Mark</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight part of the text</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Mark</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Mark/Mark.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/mark.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/mark-ffe8bf0434c03f92.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Mark</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight part of the text</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Mark</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Mark/Mark.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/mark.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:100%;--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Highlight <mark style="--mark-bg-dark:var(--mantine-color-yellow-5);--mark-bg-light:var(--mantine-color-yellow-2)" class="m-bcb3f3c2 mantine-Mark-root">this chunk</mark> of the text</p></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdktdarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7attktdarblu6-dropdown" id="mantine-R7attktdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Mark</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -12,4 +12,4 @@
       Highlight <span class="hljs-tag">&lt;<span class="hljs-name">Mark</span>&gt;</span>this chunk<span class="hljs-tag">&lt;/<span class="hljs-name">Mark</span>&gt;</span> of the text
     <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/list"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">List</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/table"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Table</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/mark","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/list/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">List</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/table/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Table</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/mark","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/menu.html b/core/menu/index.html
similarity index 71%
rename from core/menu.html
rename to core/menu/index.html
index 6f21bca3973..14eeb64b8da 100644
--- a/core/menu.html
+++ b/core/menu/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/menu-fc9f267dbbc00c03.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Menu</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Combine a list of secondary actions into single interactive area</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Menu</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Menu/Menu.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/menu.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/menu-fc9f267dbbc00c03.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Menu</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Combine a list of secondary actions into single interactive area</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Menu</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Menu/Menu.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/menu.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R58ddarblu6-dropdown" id="mantine-R58ddarblu6-target"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle menu</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Menu</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> {
   <span class="hljs-title class_">IconSettings</span>,
@@ -126,7 +126,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="transitions" data-heading="Transitions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#transitions">Transitions</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Menu dropdown can be animated with any of premade transitions from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Menu dropdown can be animated with any of premade transitions from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R5btdarblu6-dropdown" id="mantine-R5btdarblu6-target"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle menu</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Menu</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -220,7 +220,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Menu</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Menu</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Menu</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -236,10 +236,10 @@
 <li class="MdxTypography_li__JpNrx">Menu item has <code class="m-b183c0a2 mantine-Code-root" dir="ltr">role=&quot;menuitem&quot;</code> attribute</li>
 </ul>
 <div id="supported-target-elements" data-heading="Supported target elements" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#supported-target-elements">Supported target elements</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Uncontrolled Menu with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">trigger=&quot;click&quot;</code> (default) will be accessible only when used with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element or component that renders it (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, etc.).
+<p class="MdxTypography_paragraph__Lp7wh">Uncontrolled Menu with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">trigger=&quot;click&quot;</code> (default) will be accessible only when used with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element or component that renders it (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, etc.).
 Other elements will not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Space</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Enter</code> key presses.</p>
 <div id="hover-menu" data-heading="Hover menu" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#hover-menu">Hover menu</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Menu with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">trigger=&quot;hover&quot;</code> is not accessible – it cannot be accessed with keyboard,
 use it only if you do not care about accessibility.</p>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h2>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Escape</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Opens/closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus on target element</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to previous menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to next menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to first menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to last menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loading-overlay"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">LoadingOverlay</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/modal"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modal</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/menu","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Escape</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Opens/closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus on target element</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to previous menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to next menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to first menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Moves focus to last menu item</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loading-overlay/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">LoadingOverlay</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/modal/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modal</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/menu","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/modal.html b/core/modal/index.html
similarity index 76%
rename from core/modal.html
rename to core/modal/index.html
index 89c6fa5cadc..d68b2c6e266 100644
--- a/core/modal.html
+++ b/core/modal/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/core/modal-b80f055f1e8880a7.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Modal</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">An accessible overlay dialog</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Modal/Modal.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/modal.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/core/modal-b80f055f1e8880a7.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Modal</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">An accessible overlay dialog</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Modal/Modal.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/modal.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open modal</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -133,7 +133,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">To switch Modal to fullscreen on devices with small screens only use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query">use-media-query</a> hook.
+<p class="MdxTypography_paragraph__Lp7wh">To switch Modal to fullscreen on devices with small screens only use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query/">use-media-query</a> hook.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop is ignored if <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fullScreen</code> prop is set:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open Modal</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure, useMediaQuery } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -159,7 +159,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="customize-overlay" data-heading="Customize overlay" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-overlay">Customize overlay</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a> component, you can set any props that <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a> component, you can set any props that <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a>
 supports with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">overlayProps</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open modal</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -251,8 +251,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-transitions" data-heading="Change transitions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-transitions">Change transitions</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal</code> is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> component. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>
-prop to customize any <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> properties:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal</code> is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> component. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code>
+prop to customize any <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> properties:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Rotate left transition</span></span></button><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Fade transition</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -292,7 +292,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="initial-focus" data-heading="Initial focus" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-focus">Initial focus</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Modal uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap">FocusTrap</a> to trap focus. Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code>
+<p class="MdxTypography_paragraph__Lp7wh">Modal uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap/">FocusTrap</a> to trap focus. Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code>
 attribute to the element that should receive initial focus.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open modal</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -330,7 +330,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">You can use the following compound components to have full control over the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal</code> rendering:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Root</code> – context provider</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Overlay</code> – render <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay">Overlay</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Overlay</code> – render <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/overlay/">Overlay</a></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Content</code> – main modal element, should include all modal content</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Header</code> – sticky header, usually contains <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Title</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.CloseButton</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Title</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h2</code> element, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-labelledby</code> of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Content</code> is pointing to this element, usually is rendered inside <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Modal.Header</code></li>
@@ -383,4 +383,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Modal</span> <span class="hljs-attr">closeButtonProps</span>=<span class="hljs-string">{{</span> &#x27;<span class="hljs-attr">aria-label</span>&#x27;<span class="hljs-attr">:</span> &#x27;<span class="hljs-attr">Close</span> <span class="hljs-attr">modal</span>&#x27; }} <span class="hljs-attr">opened</span> <span class="hljs-attr">onClose</span>=<span class="hljs-string">{()</span> =&gt;</span> {}} /&gt;</span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Menu</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/overlay"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Overlay</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/modal","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/menu/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Menu</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/overlay/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Overlay</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/modal","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/multi-select.html b/core/multi-select/index.html
similarity index 82%
rename from core/multi-select.html
rename to core/multi-select/index.html
index 4f21ca756c1..c1bd19cf28e 100644
--- a/core/multi-select.html
+++ b/core/multi-select/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/7285-35f2fd967e6310ce.js" defer=""></script><script src="/_next/static/chunks/pages/core/multi-select-6ccab9bb88319b43.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MultiSelect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Custom searchable multi select</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/multi-select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a>. You can find examples of custom <!-- -->multi select<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">the examples page</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/7285-35f2fd967e6310ce.js" defer=""></script><script src="/_next/static/chunks/pages/core/multi-select-6ccab9bb88319b43.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MultiSelect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Custom searchable multi select</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/multi-select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a>. You can find examples of custom <!-- -->multi select<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">the examples page</a>.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> provides a way to enter multiple values.
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input">TagsInput</a>, but it does not allow entering custom values.</p>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tags-input/">TagsInput</a>, but it does not allow entering custom values.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" for="mantine-Ragtdarblu6" id="mantine-Ragtdarblu6-label">Your favorite libraries</label><div class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-pointer="true" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-pointer="true" data-type="visible" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" id="mantine-Ragtdarblu6" aria-invalid="false" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -209,10 +209,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="scrollable-dropdown" data-heading="Scrollable dropdown" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-dropdown">Scrollable dropdown</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea.Autosize</a>.
+<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea.Autosize</a>.
 You can control dropdown max-height with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxDropdownHeight</code> prop if you do not change the default settings.</p>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to use native scrollbars, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withScrollArea={false}</code>. Note that in this case,
-you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" for="mantine-Rqoddarblu6" id="mantine-Rqoddarblu6-label">With scroll area (default)</label><div class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-pointer="true" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-pointer="true" data-type="visible" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" id="mantine-Rqoddarblu6" aria-invalid="false" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" for="mantine-R1aoddarblu6" id="mantine-R1aoddarblu6-label">With native scroll</label><div class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-pointer="true" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-pointer="true" data-type="visible" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" id="mantine-R1aoddarblu6" aria-invalid="false" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">Array</span>(<span class="hljs-number">100</span>)
@@ -275,13 +275,13 @@
     /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MultiSelect</span> <span class="hljs-attr">comboboxProps</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">withinPortal:</span> <span class="hljs-attr">false</span> }} <span class="hljs-attr">data</span>=<span class="hljs-string">{[]}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" data-variant="default" data-size="sm" for="mantine-R1aqldarblu6" id="mantine-R1aqldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-MultiSelect-description" data-variant="default" data-size="sm" id="mantine-R1aqldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-padding-y:var(--input-padding-y-sm)" class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div style="--pg-gap:var(--pg-gap-sm)" class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group" data-size="sm"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-pointer="true" data-type="visible" placeholder="MultiSelect placeholder" readonly="" aria-haspopup="listbox" autoComplete="off" id="mantine-R1aqldarblu6" aria-invalid="false" aria-describedby="mantine-R1aqldarblu6-description" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-sm)" class="m-2943220b mantine-ComboboxChevron-chevron" data-size="sm" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkqldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkqldarblu6" id="mantine-R3mdkqldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkqldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkqldarblu6" id="mantine-R3mdkqldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkqldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkqldarblu6" id="mantine-R3mdkqldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkqldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkqldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkqldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kqldarblu6" id="mantine-R15kqldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kqldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkqldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkqldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkqldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkqldarblu6" id="mantine-R1lkqldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkqldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkqldarblu6" id="mantine-R1tkqldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkqldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MultiSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -346,7 +346,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MultiSelect</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -376,4 +376,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MultiSelect</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/combobox"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Combobox</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pill"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pill</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/multi-select","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/combobox/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Combobox</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pill/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pill</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/multi-select","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/native-select.html b/core/native-select/index.html
similarity index 73%
rename from core/native-select.html
rename to core/native-select/index.html
index 0690220d885..abd228938de 100644
--- a/core/native-select.html
+++ b/core/native-select/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/native-select-47bd241dbc0df0b4.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NativeSelect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Native select element based on Input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NativeSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NativeSelect/NativeSelect.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/native-select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">select</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/native-select-47bd241dbc0df0b4.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NativeSelect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Native select element based on Input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NativeSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NativeSelect/NativeSelect.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/native-select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">select</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" data-variant="default" data-size="sm" for="mantine-R1agldarblu6" id="mantine-R1agldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-NativeSelect-description" data-variant="default" data-size="sm" id="mantine-R1agldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" aria-invalid="false" aria-describedby="mantine-R1agldarblu6-description" id="mantine-R1agldarblu6"><option value="React">React</option><option value="Angular">Angular</option><option value="Vue">Vue</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-sm)" class="m-2943220b mantine-ComboboxChevron-chevron" data-size="sm" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkgldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkgldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkgldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkgldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kgldarblu6" id="mantine-R15kgldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kgldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkgldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkgldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkgldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkgldarblu6" id="mantine-R1lkgldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkgldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkgldarblu6" id="mantine-R1tkgldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkgldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NativeSelect</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -205,7 +205,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NativeSelect</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -228,4 +228,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">NativeSelect</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/json-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">JsonInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/number-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NumberInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/native-select","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/json-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">JsonInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/number-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NumberInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/native-select","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/nav-link.html b/core/nav-link/index.html
similarity index 68%
rename from core/nav-link.html
rename to core/nav-link/index.html
index 1b1aa95363f..b3d0ea58f1d 100644
--- a/core/nav-link.html
+++ b/core/nav-link/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/nav-link-a62ce78c1e0a69a9.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NavLink</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Navigation link</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NavLink/NavLink.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/nav-link.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/nav-link-a62ce78c1e0a69a9.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NavLink</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Navigation link</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NavLink/NavLink.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/nav-link.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(15rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><a class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-home-2"><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M10 12h4v4h-4z"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">With icon</span><span class="m-57492dcc mantine-NavLink-description"></span></div></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-gauge"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M13.41 10.59l2.59 -2.59"></path><path d="M7 12a5 5 0 0 1 5 -5"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">With right section</span><span class="m-57492dcc mantine-NavLink-description"></span></div><span class="m-690090b5 mantine-NavLink-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right"><path d="M9 6l6 6l-6 6"></path></svg></span></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root" data-disabled="true"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-circle-off"><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"></path><path d="M3 3l18 18"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">Disabled</span><span class="m-57492dcc mantine-NavLink-description"></span></div></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><div style="--badge-height:var(--badge-height-xs);--badge-padding-x:var(--badge-padding-x-xs);--badge-fz:var(--badge-fz-xs);--badge-bg:var(--mantine-color-red-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding:0;width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="m-347db0ec mantine-Badge-root" data-variant="filled" data-size="xs"><span class="m-5add502a mantine-Badge-label">3</span></div></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">With description</span><span class="m-57492dcc mantine-NavLink-description">Additional information</span></div></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a style="--nl-bg:transparent;--nl-hover:var(--mantine-color-blue-light-hover);--nl-color:var(--mantine-color-blue-light-color)" class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-active="true"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-activity"><path d="M3 12h4l3 8l4 -16l3 8h4"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">Active subtle</span><span class="m-57492dcc mantine-NavLink-description" data-active="true"></span></div><span class="m-690090b5 mantine-NavLink-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right"><path d="M9 6l6 6l-6 6"></path></svg></span></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root" data-active="true"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-activity"><path d="M3 12h4l3 8l4 -16l3 8h4"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">Active light</span><span class="m-57492dcc mantine-NavLink-description" data-active="true"></span></div><span class="m-690090b5 mantine-NavLink-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right"><path d="M9 6l6 6l-6 6"></path></svg></span></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div><a style="--nl-bg:var(--mantine-color-blue-filled);--nl-hover:var(--mantine-color-blue-filled-hover);--nl-color:var(--mantine-color-white)" class="mantine-focus-auto m-f0824112 mantine-NavLink-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" data-active="true"><span class="m-690090b5 mantine-NavLink-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-activity"><path d="M3 12h4l3 8l4 -16l3 8h4"></path></svg></span><div class="m-f07af9d2 mantine-NavLink-body"><span class="m-1f6ac4c4 mantine-NavLink-label">Active filled</span><span class="m-57492dcc mantine-NavLink-description" data-active="true"></span></div><span class="m-690090b5 mantine-NavLink-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right"><path d="M9 6l6 6l-6 6"></path></svg></span></a><div style="box-sizing:border-box;display:none;height:0;overflow:hidden" class="" aria-hidden="true"><div style="opacity:0;transition:opacity 200ms ease"><div class="m-e17b862f mantine-NavLink-children"></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span>, <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHome2</span>, <span class="hljs-title class_">IconGauge</span>, <span class="hljs-title class_">IconChevronRight</span>, <span class="hljs-title class_">IconActivity</span>, <span class="hljs-title class_">IconCircleOff</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -117,7 +117,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NavLink</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NavLink</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
@@ -129,11 +129,11 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NavLink<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">NavLinkProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyNavLinkProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">NavLinkProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">NavLinkProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">NavLinkProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="get-element-ref" data-heading="Get element ref" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-element-ref">Get element ref</a></h2><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> ref = useRef&lt;<span class="hljs-title class_">HTMLAnchorElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/burger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Burger</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pagination"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pagination</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/nav-link","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/burger/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Burger</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pagination/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pagination</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/nav-link","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/notification.html b/core/notification/index.html
similarity index 63%
rename from core/notification.html
rename to core/notification/index.html
index a8106657275..bc2fa5b5c5d 100644
--- a/core/notification.html
+++ b/core/notification/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/notification-dc748cf3d494da97.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Notification</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Show dynamic notifications and alerts to user, part of notifications system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Notification</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Notification/Notification.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/notification.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/notification-dc748cf3d494da97.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Notification</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Show dynamic notifications and alerts to user, part of notifications system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Notification</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Notification/Notification.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/notification.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Notification is a base component for notification system.
-Build your own or use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications">@mantine/notifications</a> package.</p>
+Build your own or use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications/">@mantine/notifications</a> package.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><div style="--notification-radius:var(--mantine-radius-sm);--notification-color:var(--mantine-color-blue-filled)" class="m-a513464 mantine-Notification-root" role="alert"><div class="m-a49ed24 mantine-Notification-body"><div class="m-3feedf16 mantine-Notification-title">We notify you that</div><div class="m-3d733a3a mantine-Notification-description" data-with-title="true">You are now obligated to give a star to Mantine project on GitHub</div></div><button style="--cb-icon-size:calc(1rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-220c80f2 m-919a4d88 mantine-Notification-closeButton m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" color="gray"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R3d4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R3d4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R3d4ldarblu6">Loading</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R5d4ldarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R5d4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R5d4ldarblu6">With close button</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R7d4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R7d4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R7d4ldarblu6">With border</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R9d4ldarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atpd4ldarblu6-dropdown" id="mantine-R7atpd4ldarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rbd4ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd4ldarblu6" id="mantine-Rdd4ldarblu6-label">Title</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd4ldarblu6" value="We notify you that"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd4ldarblu6" id="mantine-Rfd4ldarblu6-label">Children</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd4ldarblu6" value="You are now obligated to give a star to Mantine project on GitHub"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Notification</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -34,7 +34,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notification</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notification</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -48,4 +48,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Notification</span> <span class="hljs-attr">closeButtonProps</span>=<span class="hljs-string">{{</span> &#x27;<span class="hljs-attr">aria-label</span>&#x27;<span class="hljs-attr">:</span> &#x27;<span class="hljs-attr">Hide</span> <span class="hljs-attr">notification</span>&#x27; }} /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loader"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Loader</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/progress"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Progress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/notification","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/loader/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Loader</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/progress/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Progress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/notification","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/number-input.html b/core/number-input/index.html
similarity index 80%
rename from core/number-input.html
rename to core/number-input/index.html
index dc795023421..53cd91fa05a 100644
--- a/core/number-input.html
+++ b/core/number-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/number-input-57173b1bc35757fe.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NumberInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture number from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NumberInput/NumberInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/number-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/number-input-57173b1bc35757fe.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NumberInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture number from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/NumberInput/NumberInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/number-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-NumberInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" data-variant="default" data-size="sm" for="mantine-R1agldarblu6" id="mantine-R1agldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-NumberInput-description" data-variant="default" data-size="sm" id="mantine-R1agldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-size="sm" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Input placeholder" aria-invalid="false" aria-describedby="mantine-R1agldarblu6-description" id="mantine-R1agldarblu6" type="text" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m-95e17d22 mantine-NumberInput-controls" style="--ni-chevron-size:var(--ni-chevron-size-sm)"><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkgldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkgldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkgldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkgldarblu6" id="mantine-R3mdkgldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkgldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kgldarblu6" id="mantine-R15kgldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kgldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkgldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkgldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkgldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkgldarblu6" id="mantine-R1lkgldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkgldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkgldarblu6" id="mantine-R1tkgldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkgldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -237,7 +237,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">NumberInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -267,4 +267,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/native-select"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NativeSelect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/password-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PasswordInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/number-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/native-select/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NativeSelect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/password-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PasswordInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/number-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/overlay.html b/core/overlay/index.html
similarity index 58%
rename from core/overlay.html
rename to core/overlay/index.html
index 4fd62a8581a..b7d37ac499a 100644
--- a/core/overlay.html
+++ b/core/overlay/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/overlay-2df8c5a21a1b6265.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Overlay</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Overlays parent element with div element with any color and opacity</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Overlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Overlay/Overlay.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/overlay.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/overlay-2df8c5a21a1b6265.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Overlay</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Overlays parent element with div element with any color and opacity</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Overlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Overlay/Overlay.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/overlay.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Overlay</code> takes 100% of width and height of parent container or viewport if <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fixed</code> prop is set.
 Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">backgroundOpacity</code> props to change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Overlay</code> background-color. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">backgroundOpacity</code> prop
 does not change CSS opacity property, it changes background-color. For example, if you set
@@ -72,7 +72,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">AspectRatio</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Overlay</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Overlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Overlay</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Overlay</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Overlay</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
@@ -84,4 +84,4 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Overlay<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">OverlayProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyOverlayProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">OverlayProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">OverlayProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/modal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modal</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/popover"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Popover</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/overlay","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">OverlayProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/modal/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modal</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/popover/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Popover</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/overlay","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/pagination.html b/core/pagination/index.html
similarity index 76%
rename from core/pagination.html
rename to core/pagination/index.html
index 2b374ac6171..568dce5de9c 100644
--- a/core/pagination.html
+++ b/core/pagination/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/pages/core/pagination-612488ec5cdc1903.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Pagination</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display active page and navigate between multiple pages</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pagination</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Pagination/Pagination.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pagination.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/pages/core/pagination-612488ec5cdc1903.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Pagination</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display active page and navigate between multiple pages</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pagination</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Pagination/Pagination.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pagination.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--pagination-control-radius:var(--mantine-radius-sm);--pagination-control-size:var(--pagination-control-size-md);--pagination-control-fz:var(--mantine-font-size-md);--pagination-active-bg:var(--mantine-color-blue-filled)" class="m-4addd315 mantine-Pagination-root" data-size="md"><div style="--group-gap:calc(0.5rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-disabled="true" type="button" disabled=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z" fill="currentColor"></path></svg></button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-active="true" data-with-padding="true" type="button" aria-current="page">1</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">2</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">3</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">4</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">5</button><div class="m-4ad7767d mantine-Pagination-dots"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z" fill="currentColor"></path></svg></div><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">10</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" type="button"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z" fill="currentColor"></path></svg></button></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Relr6q8ddarblu6-dropdown" id="mantine-Relr6q8ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Riq8ddarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Riq8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Riq8ddarblu6">With controls</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmq8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmq8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmq8ddarblu6">With edges</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rqq8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rqq8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rqq8ddarblu6">Disabled</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pagination</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -54,7 +54,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Pagination</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Pagination</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -180,5 +180,5 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="use-pagination-hook" data-heading="use-pagination hook" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#use-pagination-hook">use-pagination hook</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">If you need more flexibility <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code> package exports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-pagination">use-pagination</a> hook,
-you can use it to create custom pagination components.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/nav-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavLink</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stepper"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stepper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pagination","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<p class="MdxTypography_paragraph__Lp7wh">If you need more flexibility <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code> package exports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-pagination/">use-pagination</a> hook,
+you can use it to create custom pagination components.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/nav-link/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavLink</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stepper/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stepper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pagination","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/paper.html b/core/paper/index.html
similarity index 51%
rename from core/paper.html
rename to core/paper/index.html
index 531e9c790b5..725cf1f2a45 100644
--- a/core/paper.html
+++ b/core/paper/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/paper-d658195e4c66a4e0.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Paper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders white or dark background depending on color scheme</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Paper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Paper/Paper.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/paper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/paper-d658195e4c66a4e0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Paper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders white or dark background depending on color scheme</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Paper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Paper/Paper.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/paper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="padding:var(--mantine-spacing-md)" class=""><div style="--paper-radius:var(--mantine-radius-sm);--paper-shadow:var(--mantine-shadow-xs);margin-right:auto;margin-left:auto;padding:var(--mantine-spacing-xl);max-width:calc(25rem * var(--mantine-scale))" class="m-1b7284a3 mantine-Paper-root"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Paper is the most basic ui component</p><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Use it to create cards, dropdowns, modals and other components that require background with shadow</p></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rr9ddarblu6-label">Shadow</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(0% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:0%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="0"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1b9ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1r9ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1r9ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1r9ddarblu6">With border</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Paper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -17,7 +17,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Paper</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Paper</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Paper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Paper</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Paper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Paper</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;button&quot;</span> /&gt;</span></span>;
@@ -29,4 +29,4 @@
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Paper<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">PaperProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyPaperProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">PaperProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">PaperProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/focus-trap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FocusTrap</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/portal"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Portal</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/paper","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">PaperProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/focus-trap/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FocusTrap</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/portal/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Portal</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/paper","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/password-input.html b/core/password-input/index.html
similarity index 72%
rename from core/password-input.html
rename to core/password-input/index.html
index a531382ca99..d7309a82ca6 100644
--- a/core/password-input.html
+++ b/core/password-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/password-input-ddb449653c7b0453.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PasswordInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture password data from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PasswordInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PasswordInput/PasswordInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/password-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/password-input-ddb449653c7b0453.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PasswordInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture password data from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PasswordInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PasswordInput/PasswordInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/password-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--psi-icon-size:var(--psi-icon-size-sm);--psi-button-size:var(--psi-button-size-sm)" class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-variant="default" data-size="sm" for="mantine-Rl8ldarblu6" id="mantine-Rl8ldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-PasswordInput-description" data-variant="default" data-size="sm" id="mantine-Rl8ldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-size="sm" data-with-right-section="true"><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-Rl8ldarblu6" placeholder="Input placeholder" autoComplete="off" type="password"/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-radius:var(--mantine-radius-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6q8ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ldarblu6" id="mantine-R1r6q8ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riq8ldarblu6" id="mantine-Riq8ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riq8ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmq8ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmq8ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmq8ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqq8ldarblu6" id="mantine-Rqq8ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rqq8ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ruq8ldarblu6" id="mantine-Ruq8ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Ruq8ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PasswordInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -71,7 +71,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="strength-meter-example" data-heading="Strength meter example" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#strength-meter-example">Strength meter example</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Password strength meter example with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress">Progress</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a> components:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Password strength meter example with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/progress/">Progress</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a> components:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R5bddarblu6-dropdown" id="mantine-R5bddarblu6-target" class=""><div class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-required="true" for="mantine-Rtbddarblu6" id="mantine-Rtbddarblu6-label">Your password<span class="m-78a94662 mantine-InputWrapper-required mantine-PasswordInput-required" aria-hidden="true"> *</span></label><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-with-right-section="true"><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-Rtbddarblu6" placeholder="Your password" autoComplete="off" type="password" value=""/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconX</span>, <span class="hljs-title class_">IconCheck</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">PasswordInput</span>, <span class="hljs-title class_">Progress</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Popover</span>, <span class="hljs-title class_">Box</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -163,7 +163,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PasswordInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -204,4 +204,4 @@
       <span class="hljs-attr">visibilityToggleProps</span>=<span class="hljs-string">{{</span> &#x27;<span class="hljs-attr">aria-label</span>&#x27;<span class="hljs-attr">:</span> &#x27;<span class="hljs-attr">Toggle</span> <span class="hljs-attr">password</span> <span class="hljs-attr">visibility</span>&#x27; }}
     /&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/number-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NumberInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pin-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PinInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/password-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/number-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NumberInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pin-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PinInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/password-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/pill.html b/core/pill/index.html
similarity index 59%
rename from core/pill.html
rename to core/pill/index.html
index 0c51b3f6ed9..651c8dfaa8e 100644
--- a/core/pill.html
+++ b/core/pill/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/pill-986a825a18bb84a3.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Pill</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Removable and non-removable tags</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pill</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Pill/Pill.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pill.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/pill-986a825a18bb84a3.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Pill</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Removable and non-removable tags</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pill</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Pill/Pill.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pill.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-6874fea5"><span style="--pill-fz:var(--pill-fz-md);--pill-height:var(--pill-height-md)" class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="md"><span class="m-1e0e6180 mantine-Pill-label">React</span></span></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1middarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R2middarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R2middarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R2middarblu6">With remove button</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Pill</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -29,11 +29,11 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">InputBase</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Pill</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Pill</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
  */</style><div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(12.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-6874fea5"><span style="flex:0" class="m-44da308b root m-7cda1cd6 mantine-Pill-root" data-variant="default" data-with-remove="true"><span class="label m-1e0e6180 mantine-Pill-label">Test pill</span><button class="mantine-focus-auto mantine-active remove m-ae386778 mantine-Pill-remove m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1" aria-hidden="true"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></span></div></div></div><div class="m-de00ac9"><div class="m-c4d78f60"><p style="margin-bottom:calc(0.3125rem * var(--mantine-scale));font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Component Styles API</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale));line-height:1.45" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hover over selectors to highlight corresponding elements</p></div><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">root</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Root element</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">label</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Pill label (children)</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remove</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remove button</p></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-comment">/*
  * Hover over selectors to apply outline styles
  *
- */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/multi-select"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MultiSelect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pills-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PillsInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pill","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+ */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/multi-select/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MultiSelect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pills-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PillsInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pill","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/pills-input.html b/core/pills-input/index.html
similarity index 62%
rename from core/pills-input.html
rename to core/pills-input/index.html
index b7e4931aed0..bba30cfa2ce 100644
--- a/core/pills-input.html
+++ b/core/pills-input/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/9-1e1cb50a06718751.js" defer=""></script><script src="/_next/static/chunks/pages/core/pills-input-1077e0827ab25d6a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PillsInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for custom tags inputs and multi selects</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PillsInput/PillsInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pills-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/9-1e1cb50a06718751.js" defer=""></script><script src="/_next/static/chunks/pages/core/pills-input-1077e0827ab25d6a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PillsInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for custom tags inputs and multi selects</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PillsInput/PillsInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pills-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> 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, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> is used in combination with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pill">Pill</a> component.</p>
+Usually, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> is used in combination with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pill/">Pill</a> component.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(27.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-PillsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PillsInput-label" for="mantine-R2kldarblu6" id="mantine-R2kldarblu6-label">PillsInput</label><div class="m-6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default"><div class="m-1dcfd90b mantine-PillGroup-group"><span class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default"><span class="m-1e0e6180 mantine-Pill-label">React</span></span><span class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default"><span class="m-1e0e6180 mantine-Pill-label">Vue</span></span><span class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default"><span class="m-1e0e6180 mantine-Pill-label">Svelte</span></span><input class="m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Enter tags" id="mantine-R2kldarblu6" aria-invalid="false"/></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span>, <span class="hljs-title class_">Pill</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -22,7 +22,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(27.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-PillsInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-PillsInput-label" data-variant="default" data-size="sm" for="mantine-Ralddarblu6" id="mantine-Ralddarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-PillsInput-description" data-variant="default" data-size="sm" id="mantine-Ralddarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-padding-y:var(--input-padding-y-sm)" class="m-6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default"><div style="--pg-gap:var(--pg-gap-sm)" class="m-1dcfd90b mantine-PillGroup-group" data-size="sm"><span style="--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm)" class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="sm"><span class="m-1e0e6180 mantine-Pill-label">React</span></span><span style="--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm)" class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="sm"><span class="m-1e0e6180 mantine-Pill-label">Vue</span></span><span style="--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm)" class="m-44da308b m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="sm"><span class="m-1e0e6180 mantine-Pill-label">Svelte</span></span><input class="m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Enter tags" id="mantine-Ralddarblu6" aria-invalid="false" aria-describedby="mantine-Ralddarblu6-description"/></div></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d5ddarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5ddarblu6" id="mantine-Rtjd5ddarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd5ddarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5ddarblu6" id="mantine-Rtjd5ddarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd5ddarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd5ddarblu6" id="mantine-Rtjd5ddarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd5ddarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d5ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d5ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d5ddarblu6" id="mantine-R9d5ddarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d5ddarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd5ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd5ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd5ddarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd5ddarblu6" id="mantine-Rdd5ddarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd5ddarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd5ddarblu6" id="mantine-Rfd5ddarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd5ddarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span>, <span class="hljs-title class_">Pill</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -42,7 +42,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="searchable-select-example" data-heading="Searchable select example" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#searchable-select-example">Searchable select example</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Combine <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> to create searchable multiselect:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Combine <code class="m-b183c0a2 mantine-Code-root" dir="ltr">PillsInput</code> with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> to create searchable multiselect:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-PillsInput-root"><div class="m-6c018570 mantine-Input-wrapper mantine-PillsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-PillsInput-input" data-variant="default"><div class="m-1dcfd90b mantine-PillGroup-group"><input class="m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Search values" aria-haspopup="listbox" autoComplete="off" id="mantine-Rem5darblu6" aria-invalid="false" value=""/></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" data-collapsed="true" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Expand code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 11v8l3 -3m-6 0l3 3"></path><path d="M9 7l1 0"></path><path d="M14 7l1 0"></path><path d="M19 7l1 0"></path><path d="M4 7l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">PillsInput</span>, <span class="hljs-title class_">Pill</span>, <span class="hljs-title class_">Combobox</span>, <span class="hljs-title class_">CheckIcon</span>, <span class="hljs-title class_">Group</span>, useCombobox } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -153,4 +153,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">PillsInput.Field</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">PillsInput</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pill"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pill</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/select"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Select</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pills-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pill/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pill</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/select/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Select</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pills-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/pin-input.html b/core/pin-input/index.html
similarity index 60%
rename from core/pin-input.html
rename to core/pin-input/index.html
index 7f4431f8756..d8a55867cd0 100644
--- a/core/pin-input.html
+++ b/core/pin-input/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/pin-input-3ae37cb4e3944fa1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PinInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture pin code or one time password from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PinInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PinInput/PinInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pin-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/pin-input-3ae37cb4e3944fa1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">PinInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture pin code or one time password from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PinInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/PinInput/PinInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/pin-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--group-gap:var(--mantine-spacing-sm);--group-wrap:nowrap;--pin-input-size:var(--pin-input-size-sm)" class="m-f1cb205a mantine-PinInput-root m-4081bf90 mantine-Group-root" data-size="sm" role="group" id="mantine-Rakddarblu6"><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-Rakddarblu6-1" value=""/></div><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-Rakddarblu6-2" value=""/></div><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-Rakddarblu6-3" value=""/></div><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-Rakddarblu6-4" value=""/></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Length</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(33.33333333333333% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:33.33333333333333%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="10" aria-valuemin="1" aria-valuenow="4"></div><div></div></div></div><input type="hidden" value="4"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R7d4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R7d4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R7d4ddarblu6">Mask</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d4ddarblu6" id="mantine-R9d4ddarblu6-label">Placeholder</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d4ddarblu6" value="○"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ddarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rdd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rdd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rdd4ddarblu6">Error</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rfd4ddarblu6" id="mantine-Rfd4ddarblu6-label">Type</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rfd4ddarblu6"><option value="alphanumeric" selected="">Alphanumeric</option><option value="number">Number</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">PinInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -34,11 +34,11 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Accessibility</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">PinInput</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;One time code&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PinInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">PinInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
  */</style><div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--group-gap:var(--mantine-spacing-sm);--group-wrap:nowrap" class="root m-f1cb205a mantine-PinInput-root m-4081bf90 mantine-Group-root" role="group" id="mantine-R1ar5darblu6"><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="pinInput m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default"><input class="input m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-R1ar5darblu6-1" value=""/></div><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="pinInput m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default"><input class="input m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-R1ar5darblu6-2" value=""/></div><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="pinInput m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default"><input class="input m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-R1ar5darblu6-3" value=""/></div><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--_input-padding:0;--_input-text-align:center" class="pinInput m-cb288ead mantine-PinInput-pinInput m-6c018570 mantine-Input-wrapper mantine-PinInput-wrapper" data-variant="default"><input class="input m-8fb7ebe7 mantine-Input-input mantine-PinInput-input" data-variant="default" inputMode="text" type="text" autoComplete="one-time-code" placeholder="○" aria-label="PinInput" aria-invalid="false" id="mantine-R1ar5darblu6-4" value=""/></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div class="m-c4d78f60"><p style="margin-bottom:calc(0.3125rem * var(--mantine-scale));font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Component Styles API</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale));line-height:1.45" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hover over selectors to highlight corresponding elements</p></div><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">root</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Root element</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">pinInput</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Input item wrapper</p></button><button class="mantine-focus-auto m-22105db1 m-87cf2631 mantine-UnstyledButton-root" type="button"><p style="margin-bottom:calc(0.125rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">input</p><p style="color:var(--mantine-color-dimmed);font-size:calc(0.6875rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Input element</p></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-comment">/*
  * Hover over selectors to apply outline styles
  *
- */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/password-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PasswordInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/radio"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Radio</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pin-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+ */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/password-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PasswordInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/radio/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Radio</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/pin-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/popover.html b/core/popover/index.html
similarity index 75%
rename from core/popover.html
rename to core/popover/index.html
index c25cb9d6ef4..073b387b58b 100644
--- a/core/popover.html
+++ b/core/popover/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/popover-2f7236164916e6a2.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Popover</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display popover section relative to given target element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Popover</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Popover/Popover.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/popover.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/popover-2f7236164916e6a2.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Popover</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display popover section relative to given target element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Popover</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Popover/Popover.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/popover.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Ragddarblu6-dropdown" id="mantine-Ragddarblu6-target"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Toggle popover</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Popover</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -214,7 +214,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="initial-focus" data-heading="Initial focus" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-focus">Initial focus</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Popover uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap">FocusTrap</a> component to manage focus.
+<p class="MdxTypography_paragraph__Lp7wh">Popover uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/focus-trap/">FocusTrap</a> component to manage focus.
 Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-autofocus</code> attribute to element that should receive initial focus:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Popover</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -306,7 +306,7 @@
 <li class="MdxTypography_li__JpNrx">Dropdown element has <code class="m-b183c0a2 mantine-Code-root" dir="ltr">role=&quot;dialog&quot;</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-labelledby=&quot;target-id&quot;</code> attributes</li>
 <li class="MdxTypography_li__JpNrx">Target element has <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-haspopup=&quot;dialog&quot;</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-expanded</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-controls=&quot;dropdown-id&quot;</code> attributes</li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Uncontrolled Popover will be accessible only when used with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element or component that renders it (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, etc.).
+<p class="MdxTypography_paragraph__Lp7wh">Uncontrolled Popover will be accessible only when used with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element or component that renders it (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, etc.).
 Other elements will not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Space</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Enter</code> key presses.</p>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h2>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Escape</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Opens/closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus on target element</code></td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/overlay"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Overlay</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tooltip"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tooltip</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/popover","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Escape</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus within dropdown</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Space/Enter</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Opens/closes dropdown</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Focus on target element</code></td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/overlay/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Overlay</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tooltip/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tooltip</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/popover","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/portal.html b/core/portal.html
deleted file mode 100644
index 272feb66106..00000000000
--- a/core/portal.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Portal | Mantine</title><meta name="description" content="Renders component outside of parent element tree"/><meta name="og:title" content="Portal | Mantine"/><meta name="og:description" content="Renders component outside of parent element tree"/><meta name="twitter:title" content="Portal | Mantine"/><meta name="twitter:description" content="Renders component outside of parent element tree"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/portal-9deac8e0b0bcbcdf.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Portal</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders component outside of parent element tree</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Portal/Portal.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/portal.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Portal is a wrapper component for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://reactjs.org/docs/portals.html">ReactDOM.createPortal</a> API.
-Render any component or element at the end of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code> or at a given element. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer">Drawer</a> components are wrapped in Portal by default.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Use Portal to render a component or an element at a different place (defaults to the end of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code>).
-Portal is useful when you want to prevent parent styles from interfering with children,
-usually all these styles are related to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">z-index</code> properties
-and portals are used for components with fixed position, for example, modals.</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
-<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> [opened, setOpened] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">false</span>);
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">main</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">position:</span> &#x27;<span class="hljs-attr">relative</span>&#x27;, <span class="hljs-attr">zIndex:</span> <span class="hljs-attr">1</span> }}&gt;</span>
-      {opened &amp;&amp; (
-        <span class="hljs-tag">&lt;<span class="hljs-name">Portal</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Your modal content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span>
-      )}
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> setOpened(true)} type=&quot;button&quot;&gt;
-        Open modal
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">In the example above, the div element is rendered outside of parent main (before closing body tag),
-but still receives <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opened</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClose</code> props. The element will not be affected by parent z-index.</p>
-<div id="specify-target-dom-node" data-heading="Specify target dom node" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#specify-target-dom-node">Specify target dom node</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can specify dom node where portal will be rendered by passing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">target</code> prop:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&#x27;div&#x27;</span>);
-<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(container);
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Portal</span> <span class="hljs-attr">target</span>=<span class="hljs-string">{container}</span>&gt;</span>My portal<span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span></span>;
-}</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Alternatively, you can specify selector to render portal in existing element:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Portal</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;#portal-container&quot;</span>&gt;</span>My portal<span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span></span>;
-}</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">If you don&#x27;t specify the target element, new one will be created and appended to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code> for each Portal component.</p>
-<div id="server-side-rendering" data-heading="Server side rendering" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#server-side-rendering">Server side rendering</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPortal</code> is not supported during server side rendering.
-All components inside Portal are rendered only after the application was mounted to the dom.</p>
-<div id="optionalportal-component" data-heading="OptionalPortal component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#optionalportal-component">OptionalPortal component</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">OptionalPortal</code> component lets you configure whether children should be rendered in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Portal</code>.
-It accepts the same props as the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Portal</code> component:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">OptionalPortal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">OptionalPortal</span> <span class="hljs-attr">withinPortal</span>&gt;</span>This text is rendered in Portal<span class="hljs-tag">&lt;/<span class="hljs-name">OptionalPortal</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">OptionalPortal</span> <span class="hljs-attr">withinPortal</span>=<span class="hljs-string">{false}</span>&gt;</span>This text is rendered as regular child<span class="hljs-tag">&lt;/<span class="hljs-name">OptionalPortal</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/paper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Paper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/scroll-area"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ScrollArea</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/portal","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/portal/index.html b/core/portal/index.html
new file mode 100644
index 00000000000..e1e1d1ffac1
--- /dev/null
+++ b/core/portal/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>Portal | Mantine</title><meta name="description" content="Renders component outside of parent element tree"/><meta name="og:title" content="Portal | Mantine"/><meta name="og:description" content="Renders component outside of parent element tree"/><meta name="twitter:title" content="Portal | Mantine"/><meta name="twitter:description" content="Renders component outside of parent element tree"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/portal-9deac8e0b0bcbcdf.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Portal</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders component outside of parent element tree</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Portal/Portal.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/portal.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">Portal is a wrapper component for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://reactjs.org/docs/portals.html">ReactDOM.createPortal</a> API.
+Render any component or element at the end of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code> or at a given element. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/drawer/">Drawer</a> components are wrapped in Portal by default.</p>
+<p class="MdxTypography_paragraph__Lp7wh">Use Portal to render a component or an element at a different place (defaults to the end of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code>).
+Portal is useful when you want to prevent parent styles from interfering with children,
+usually all these styles are related to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">position</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">z-index</code> properties
+and portals are used for components with fixed position, for example, modals.</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> [opened, setOpened] = <span class="hljs-title function_">useState</span>(<span class="hljs-literal">false</span>);
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">main</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">position:</span> &#x27;<span class="hljs-attr">relative</span>&#x27;, <span class="hljs-attr">zIndex:</span> <span class="hljs-attr">1</span> }}&gt;</span>
+      {opened &amp;&amp; (
+        <span class="hljs-tag">&lt;<span class="hljs-name">Portal</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Your modal content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span>
+      )}
+
+      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> setOpened(true)} type=&quot;button&quot;&gt;
+        Open modal
+      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></span>
+  );
+}</code></pre></div></div></div></div>
+<p class="MdxTypography_paragraph__Lp7wh">In the example above, the div element is rendered outside of parent main (before closing body tag),
+but still receives <code class="m-b183c0a2 mantine-Code-root" dir="ltr">opened</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClose</code> props. The element will not be affected by parent z-index.</p>
+<div id="specify-target-dom-node" data-heading="Specify target dom node" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#specify-target-dom-node">Specify target dom node</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">You can specify dom node where portal will be rendered by passing <code class="m-b183c0a2 mantine-Code-root" dir="ltr">target</code> prop:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&#x27;div&#x27;</span>);
+<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(container);
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Portal</span> <span class="hljs-attr">target</span>=<span class="hljs-string">{container}</span>&gt;</span>My portal<span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span></span>;
+}</code></pre></div></div></div></div>
+<p class="MdxTypography_paragraph__Lp7wh">Alternatively, you can specify selector to render portal in existing element:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Portal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Portal</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;#portal-container&quot;</span>&gt;</span>My portal<span class="hljs-tag">&lt;/<span class="hljs-name">Portal</span>&gt;</span></span>;
+}</code></pre></div></div></div></div>
+<p class="MdxTypography_paragraph__Lp7wh">If you don&#x27;t specify the target element, new one will be created and appended to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.body</code> for each Portal component.</p>
+<div id="server-side-rendering" data-heading="Server side rendering" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#server-side-rendering">Server side rendering</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPortal</code> is not supported during server side rendering.
+All components inside Portal are rendered only after the application was mounted to the dom.</p>
+<div id="optionalportal-component" data-heading="OptionalPortal component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#optionalportal-component">OptionalPortal component</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">OptionalPortal</code> component lets you configure whether children should be rendered in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Portal</code>.
+It accepts the same props as the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Portal</code> component:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">OptionalPortal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">OptionalPortal</span> <span class="hljs-attr">withinPortal</span>&gt;</span>This text is rendered in Portal<span class="hljs-tag">&lt;/<span class="hljs-name">OptionalPortal</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">OptionalPortal</span> <span class="hljs-attr">withinPortal</span>=<span class="hljs-string">{false}</span>&gt;</span>This text is rendered as regular child<span class="hljs-tag">&lt;/<span class="hljs-name">OptionalPortal</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/paper/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Paper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/scroll-area/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ScrollArea</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/portal","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/progress.html b/core/progress/index.html
similarity index 63%
rename from core/progress.html
rename to core/progress/index.html
index fb9d6593ac5..0817add4b24 100644
--- a/core/progress.html
+++ b/core/progress/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/progress-8fb333608ddcc74f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Progress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Give user feedback for status of the task</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Progress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Progress/Progress.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/progress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/progress-8fb333608ddcc74f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Progress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Give user feedback for status of the task</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Progress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Progress/Progress.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/progress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--progress-size:var(--progress-size-md);--progress-radius:var(--mantine-radius-sm)" class="m-db6d6462 mantine-Progress-root" data-size="md" radius="sm"><div style="--progress-section-width:50%;--progress-section-color:var(--mantine-color-blue-filled)" class="m-2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%"></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atjd4ddarblu6-dropdown" id="mantine-R7atjd4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R9d4ddarblu6-label">Value</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ddarblu6">Striped</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rdd4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rdd4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rdd4ddarblu6">Animated</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Progress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -53,7 +53,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Progress.Root</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Progress</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Progress</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -80,4 +80,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Progress.Section</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Uploading progress&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{10}</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Progress.Root</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/notification"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notification</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/ring-progress"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RingProgress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/progress","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/notification/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notification</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/ring-progress/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RingProgress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/progress","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/radio.html b/core/radio/index.html
similarity index 65%
rename from core/radio.html
rename to core/radio/index.html
index e55284622f5..3e6fe88f764 100644
--- a/core/radio.html
+++ b/core/radio/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/radio-35b0475a2e298fc1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Radio</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Wrapper for input type radio</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Radio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Radio/Radio.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/radio.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/radio-35b0475a2e298fc1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Radio</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Wrapper for input type radio</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Radio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Radio/Radio.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/radio.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-RadioGroup-root"><div style="--radio-size:var(--radio-size-sm);--radio-color:var(--mantine-color-blue-filled);--label-fz:var(--mantine-font-size-sm);--label-lh:var(--label-lh-sm)" class="m-f3f1af94 mantine-Radio-root m-5f75b09e mantine-Radio-root" data-size="sm" data-label-position="right" data-checked="true"><div class="m-5f6e695e mantine-Radio-body"><div class="m-89c4f5e4 mantine-Radio-inner" data-label-position="right"><input class="mantine-focus-auto m-8a3dbb89 mantine-Radio-radio" name="demo" id="mantine-R1rqkddarblu6" type="radio" checked="" value="react"/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" class="m-f3ed6b2b mantine-Radio-icon" aria-hidden="true"><path fill="currentColor" d="M0 2.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"></path></svg></div><div class="m-d3ea56bb mantine-Radio-labelWrapper"><label class="m-8ee546b8 mantine-Radio-label" for="mantine-R1rqkddarblu6">I cannot be unchecked</label></div></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Label position</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ddarblu6" id="mantine-Rtjd4ddarblu6-right" data-focus-ring="auto" checked="" value="right"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd4ddarblu6-right">Right</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ddarblu6" id="mantine-Rtjd4ddarblu6-left" data-focus-ring="auto" value="left"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ddarblu6-left">Left</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R5d4ddarblu6" id="mantine-R5d4ddarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R5d4ddarblu6" value="I cannot be unchecked"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R7d4ddarblu6" id="mantine-R7d4ddarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R7d4ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d4ddarblu6" id="mantine-R9d4ddarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d4ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rbd4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdd4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7attd4ddarblu6-dropdown" id="mantine-R7attd4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Radio</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -88,4 +88,4 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> ref = useRef&lt;<span class="hljs-title class_">HTMLInputElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Radio</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pin-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PinInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/rating"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rating</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/radio","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pin-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PinInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/rating/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rating</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/radio","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/rating.html b/core/rating/index.html
similarity index 74%
rename from core/rating.html
rename to core/rating/index.html
index 5266665e039..85607d5a9fd 100644
--- a/core/rating.html
+++ b/core/rating/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/rating-ec38a83baa651be2.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Rating</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick and display rating</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Rating</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Rating/Rating.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/rating.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/rating-ec38a83baa651be2.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Rating</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick and display rating</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Rating</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Rating/Rating.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/rating.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--rating-size:var(--rating-size-md);--rating-color:var(--mantine-color-yellow-filled)" class="m-f8d312f2 mantine-Rating-root" data-size="md"><div class="m-61734bb7 mantine-Rating-symbolGroup"><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-0-0" type="radio" aria-label="0" name="mantine-Rakddarblu6" value="0"/><label style="--rating-item-z-index:0" class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-0-0"><div style="--rating-symbol-clip-path:inset(0 100% 0 0)" class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol" data-filled="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-0-1" type="radio" aria-label="1" name="mantine-Rakddarblu6" value="1"/><label class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-0-1"><div class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol" data-filled="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label></div><div class="m-61734bb7 mantine-Rating-symbolGroup"><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-1-0" type="radio" data-active="true" aria-label="2" name="mantine-Rakddarblu6" checked="" value="2"/><label class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-1-0"><div class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol" data-filled="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label></div><div class="m-61734bb7 mantine-Rating-symbolGroup"><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-2-0" type="radio" aria-label="3" name="mantine-Rakddarblu6" value="3"/><label class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-2-0"><div class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label></div><div class="m-61734bb7 mantine-Rating-symbolGroup"><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-3-0" type="radio" aria-label="4" name="mantine-Rakddarblu6" value="4"/><label class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-3-0"><div class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label></div><div class="m-61734bb7 mantine-Rating-symbolGroup"><input class="m-211007ba mantine-Rating-input" id="mantine-Rakddarblu6H1-4-0" type="radio" aria-label="5" name="mantine-Rakddarblu6" value="5"/><label class="m-21342ee4 mantine-Rating-label" for="mantine-Rakddarblu6H1-4-0"><div class="m-fae05d6a mantine-Rating-symbolBody"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-5662a89a mantine-Rating-starSymbol"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg></div></label></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atjd4ddarblu6-dropdown" id="mantine-R7atjd4ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ddarblu6-label">Count</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(28.57142857142857% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:28.57142857142857%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="15" aria-valuemin="1" aria-valuenow="5"></div><div></div></div></div><input type="hidden" value="5"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R9d4ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R9d4ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R9d4ddarblu6">Highlight selected only</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Rating</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -105,4 +105,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">emptySymbol</span>=<span class="hljs-string">{getEmptyIcon}</span> <span class="hljs-attr">fullSymbol</span>=<span class="hljs-string">{getFullIcon}</span> <span class="hljs-attr">highlightSelectedOnly</span> /&gt;</span></span>;
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/radio"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Radio</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/segmented-control"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SegmentedControl</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/rating","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/radio/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Radio</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/segmented-control/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SegmentedControl</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/rating","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/ring-progress.html b/core/ring-progress/index.html
similarity index 64%
rename from core/ring-progress.html
rename to core/ring-progress/index.html
index 5c59dd17882..c5a9ed55df6 100644
--- a/core/ring-progress.html
+++ b/core/ring-progress/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/ring-progress-24518559ad47be56.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">RingProgress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Give user feedback for status of the task with circle diagram</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">RingProgress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/RingProgress/RingProgress.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/ring-progress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/ring-progress-24518559ad47be56.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">RingProgress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Give user feedback for status of the task with circle diagram</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">RingProgress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/RingProgress/RingProgress.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/ring-progress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sections</code> prop to an array of:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">value</code> – number between 0 and 100 – amount of space filled by segment</li>
@@ -45,7 +45,7 @@
   )
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="sections-tooltips" data-heading="Sections tooltips" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#sections-tooltips">Sections tooltips</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">tooltip</code> property to section to display floating <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> when user hovers over it:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">tooltip</code> property to section to display floating <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> when user hovers over it:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--rp-size:calc(10.625rem * var(--mantine-scale));--rp-label-offset:calc(2rem * var(--mantine-scale))" class="m-b32e4812 mantine-RingProgress-root"><svg class="m-d43b5134 mantine-RingProgress-svg"><circle class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="16" cx="85" cy="85" r="60.5" transform="scale(1, -1) translate(0, -170)" stroke-dasharray="76.026542216873, 304.106168867492" stroke-dashoffset="0"></circle><circle style="--curve-color:var(--mantine-color-cyan-filled)" class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="16" cx="85" cy="85" r="60.5" stroke-dasharray="152.053084433746, 228.079626650619" stroke-dashoffset="380.132711084365"></circle><circle style="--curve-color:var(--mantine-color-grape-filled)" class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="16" cx="85" cy="85" r="60.5" stroke-dasharray="57.01990666265475, 323.1128044217102" stroke-dashoffset="133.04644887952776"></circle><circle style="--curve-color:var(--mantine-color-orange-filled)" class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="16" cx="85" cy="85" r="60.5" stroke-dasharray="95.03317777109125, 285.09953331327375" stroke-dashoffset="228.079626650619"></circle></svg><div class="m-b23f9dc4 mantine-RingProgress-label"><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);pointer-events:none;padding-right:var(--mantine-spacing-xs);padding-left:var(--mantine-spacing-xs);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">Hover sections to see tooltips</p></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">RingProgress</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -97,8 +97,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="customize-label" data-heading="Customize label" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-label">Customize label</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can add any React node as label, e.g. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component with some additional styles
-or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/theme-icon">ThemeIcon</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can add any React node as label, e.g. <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component with some additional styles
+or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/theme-icon/">ThemeIcon</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div style="--rp-size:calc(7.5rem * var(--mantine-scale));--rp-label-offset:calc(1.5rem * var(--mantine-scale))" class="m-b32e4812 mantine-RingProgress-root"><svg class="m-d43b5134 mantine-RingProgress-svg"><circle class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="12" cx="60" cy="60" r="42" transform="scale(1, -1) translate(0, -120)" stroke-dasharray="158.3362697409256, 105.55751316061705" stroke-dashoffset="0"></circle><circle style="--curve-color:var(--mantine-color-blue-filled)" class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="12" cx="60" cy="60" r="42" stroke-dasharray="105.55751316061705, 158.3362697409256" stroke-dashoffset="263.89378290154264"></circle></svg><div class="m-b23f9dc4 mantine-RingProgress-label"><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl);color:var(--mantine-color-blue-filled);font-weight:700;text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xl">40%</p></div></div><div style="--rp-size:calc(7.5rem * var(--mantine-scale));--rp-label-offset:calc(1.5rem * var(--mantine-scale))" class="m-b32e4812 mantine-RingProgress-root"><svg class="m-d43b5134 mantine-RingProgress-svg"><circle class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="12" cx="60" cy="60" r="42" transform="scale(1, -1) translate(0, -120)" stroke-dasharray="0, 263.89378290154264" stroke-dashoffset="0"></circle><circle style="--curve-color:var(--mantine-color-teal-filled)" class="m-b1ca1fbf mantine-RingProgress-curve" fill="none" stroke-linecap="butt" stroke-width="12" cx="60" cy="60" r="42" stroke-dasharray="263.89378290154264, 0" stroke-dashoffset="263.89378290154264"></circle></svg><div class="m-b23f9dc4 mantine-RingProgress-label"><div class="m-4451eb3a mantine-Center-root"><button style="--ai-size:var(--ai-size-xl);--ai-radius:var(--mantine-radius-xl);--ai-bg:var(--mantine-color-teal-light);--ai-hover:var(--mantine-color-teal-light-hover);--ai-color:var(--mantine-color-teal-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" data-size="xl" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M5 12l5 5l10 -10"></path></svg></button></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">RingProgress</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Center</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconCheck</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -126,4 +126,4 @@
       /&gt;
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/progress"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Progress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/skeleton"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Skeleton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/ring-progress","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/progress/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Progress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/skeleton/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Skeleton</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/ring-progress","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/scroll-area.html b/core/scroll-area/index.html
similarity index 73%
rename from core/scroll-area.html
rename to core/scroll-area/index.html
index da5e39d1230..a4fa4535b8c 100644
--- a/core/scroll-area.html
+++ b/core/scroll-area/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/scroll-area-1d5ff333ecc4ebe6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ScrollArea</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Area with custom scrollbars</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ScrollArea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ScrollArea/ScrollArea.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/scroll-area.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/scroll-area-1d5ff333ecc4ebe6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ScrollArea</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Area with custom scrollbars</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ScrollArea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ScrollArea/ScrollArea.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/scroll-area.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ScrollArea</code> component supports the following props:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code> defines scrollbars behavior:<!-- -->
@@ -342,4 +342,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Popover.Dropdown</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Popover</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/portal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Portal</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/transition"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Transition</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/scroll-area","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/portal/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Portal</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/transition/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Transition</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/scroll-area","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/segmented-control.html b/core/segmented-control/index.html
similarity index 73%
rename from core/segmented-control.html
rename to core/segmented-control/index.html
index 4855eb143c7..6fa4ad13d55 100644
--- a/core/segmented-control.html
+++ b/core/segmented-control/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/segmented-control-f37e7ca88ae2ee27.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">SegmentedControl</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">A linear set of two or more segments</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SegmentedControl</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/SegmentedControl/SegmentedControl.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/segmented-control.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/segmented-control-f37e7ca88ae2ee27.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">SegmentedControl</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">A linear set of two or more segments</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SegmentedControl</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/SegmentedControl/SegmentedControl.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/segmented-control.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--sc-radius:var(--mantine-radius-sm);--sc-shadow:var(--mantine-shadow-xs);--sc-padding:var(--sc-padding-sm);--sc-font-size:var(--mantine-font-size-sm)" class="m-cf365364 mantine-SegmentedControl-root" data-size="sm" data-orientation="horizontal" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true" data-orientation="horizontal"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rl8ddarblu6" id="mantine-Rl8ddarblu6-React" data-focus-ring="auto" checked="" value="React"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rl8ddarblu6-React">React</label></div><div class="m-69686b9b mantine-SegmentedControl-control" data-orientation="horizontal"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rl8ddarblu6" id="mantine-Rl8ddarblu6-Angular" data-focus-ring="auto" value="Angular"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rl8ddarblu6-Angular">Angular</label></div><div class="m-69686b9b mantine-SegmentedControl-control" data-orientation="horizontal"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rl8ddarblu6" id="mantine-Rl8ddarblu6-Vue" data-focus-ring="auto" value="Vue"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rl8ddarblu6-Vue">Vue</label></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ddarblu6-label">Orientation</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ddarblu6" id="mantine-R1r6q8ddarblu6-horizontal" data-focus-ring="auto" checked="" value="horizontal"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6q8ddarblu6-horizontal">Horizontal</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6q8ddarblu6" id="mantine-R1r6q8ddarblu6-vertical" data-focus-ring="auto" value="vertical"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6q8ddarblu6-vertical">Vertical</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Raq8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Raq8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Raq8ddarblu6">Full width</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Riq8ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SegmentedControl</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -157,7 +157,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">SegmentedControl</span> <span class="hljs-attr">readOnly</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">&quot;Angular&quot;</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{[</span>&#x27;<span class="hljs-attr">React</span>&#x27;, &#x27;<span class="hljs-attr">Angular</span>&#x27;, &#x27;<span class="hljs-attr">Vue</span>&#x27;]} /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">SegmentedControl</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">SegmentedControl</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -169,7 +169,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">SegmentedControl</code> uses radio inputs under the hood, it is accessible by default with no extra steps required if you have text in labels.
 Component support the same keyboard events as a regular radio group.</p>
 <p class="MdxTypography_paragraph__Lp7wh">In case you do not have text in labels (for example, when you want to use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">SegmentedControl</code> with icons only),
-use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> to make component accessible:</p>
+use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> to make component accessible:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--sc-shadow:var(--mantine-shadow-xs)" class="m-cf365364 mantine-SegmentedControl-root" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R5fddarblu6" id="mantine-R5fddarblu6-preview" data-focus-ring="auto" checked="" value="preview"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R5fddarblu6-preview"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-eye" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale));display:block"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path></svg><span class="m-515a97f8 mantine-VisuallyHidden-root">Preview</span></label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R5fddarblu6" id="mantine-R5fddarblu6-code" data-focus-ring="auto" value="code"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R5fddarblu6-code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-code" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale));display:block"><path d="M7 8l-4 4l4 4"></path><path d="M17 8l4 4l-4 4"></path><path d="M14 4l-4 16"></path></svg><span class="m-515a97f8 mantine-VisuallyHidden-root">Code</span></label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R5fddarblu6" id="mantine-R5fddarblu6-export" data-focus-ring="auto" value="export"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R5fddarblu6-export"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-external-link" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale));display:block"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg><span class="m-515a97f8 mantine-VisuallyHidden-root">Export</span></label></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SegmentedControl</span>, <span class="hljs-title class_">VisuallyHidden</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconEye</span>, <span class="hljs-title class_">IconCode</span>, <span class="hljs-title class_">IconExternalLink</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -212,4 +212,4 @@
       ]}
     /&gt;
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/rating"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rating</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/slider"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Slider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/segmented-control","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/rating/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rating</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/slider/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Slider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/segmented-control","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/select.html b/core/select/index.html
similarity index 81%
rename from core/select.html
rename to core/select/index.html
index a08b3ce9a17..6d239dad200 100644
--- a/core/select.html
+++ b/core/select/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/core/select-dd55e68b93d9f6cf.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Select</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Custom searchable select</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Select/Select.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a>. You can find examples of custom <!-- -->select<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">the examples page</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/pages/core/select-dd55e68b93d9f6cf.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Select</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Custom searchable select</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Select/Select.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/select.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a>. You can find examples of custom <!-- -->select<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">the examples page</a>.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> allows capturing user input based on suggestions from the list.
-Unlike <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete">Autocomplete</a>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> does not allow entering custom values.</p>
+Unlike <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/autocomplete/">Autocomplete</a>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> does not allow entering custom values.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Ragtdarblu6" id="mantine-Ragtdarblu6-label">Your favorite library</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Ragtdarblu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -209,10 +209,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="scrollable-dropdown" data-heading="Scrollable dropdown" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-dropdown">Scrollable dropdown</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea.Autosize</a>.
+<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea.Autosize</a>.
 You can control dropdown max-height with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxDropdownHeight</code> prop if you do not change the default settings.</p>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to use native scrollbars, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withScrollArea={false}</code>. Note that in this case,
-you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Rqnldarblu6" id="mantine-Rqnldarblu6-label">With scroll area (default)</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rqnldarblu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-R1anldarblu6" id="mantine-R1anldarblu6-label">With native scroll</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Pick value" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-R1anldarblu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">Array</span>(<span class="hljs-number">100</span>)
@@ -273,13 +273,13 @@
     /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Select</span> <span class="hljs-attr">comboboxProps</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">withinPortal:</span> <span class="hljs-attr">false</span> }} <span class="hljs-attr">data</span>=<span class="hljs-string">{[]}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" data-variant="default" data-size="sm" for="mantine-R1aptdarblu6" id="mantine-R1aptdarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-Select-description" data-variant="default" data-size="sm" id="mantine-R1aptdarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-size="sm" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Select placeholder" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" aria-describedby="mantine-R1aptdarblu6-description" id="mantine-R1aptdarblu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg style="--combobox-chevron-size:var(--combobox-chevron-size-sm)" class="m-2943220b mantine-ComboboxChevron-chevron" data-size="sm" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkptdarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkptdarblu6" id="mantine-R3mdkptdarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkptdarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkptdarblu6" id="mantine-R3mdkptdarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkptdarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkptdarblu6" id="mantine-R3mdkptdarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkptdarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkptdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkptdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kptdarblu6" id="mantine-R15kptdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kptdarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkptdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkptdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkptdarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkptdarblu6" id="mantine-R1lkptdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkptdarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkptdarblu6" id="mantine-R1tkptdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkptdarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Select</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -344,7 +344,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Select</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -374,4 +374,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Select</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pills-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PillsInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tags-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TagsInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/select","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pills-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PillsInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tags-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TagsInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/select","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/simple-grid.html b/core/simple-grid/index.html
similarity index 54%
rename from core/simple-grid.html
rename to core/simple-grid/index.html
index 7ccc8c54cbd..a2084845118 100644
--- a/core/simple-grid.html
+++ b/core/simple-grid/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/simple-grid-b89732a79f1fe01d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">SimpleGrid</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive grid in which each item takes equal amount of space</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SimpleGrid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/SimpleGrid/SimpleGrid.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/simple-grid.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/simple-grid-b89732a79f1fe01d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">SimpleGrid</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Responsive grid in which each item takes equal amount of space</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SimpleGrid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/SimpleGrid/SimpleGrid.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/simple-grid.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">SimpleGrid</code> is a responsive grid system with equal width columns.
 It use CSS grid layout. If you need to set different widths for columns, use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid">Grid</a> component instead.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid/">Grid</a> component instead.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-Rakldarblu6{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:3;}</style><div class="m-2415a157 mantine-SimpleGrid-root __m__-Rakldarblu6" id="grid-configurator"><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">1</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">2</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">3</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">4</p></div><div class="m-a4dc100e"><p class="mantine-focus-auto m-f6c78959 m-b6d8b162 mantine-Text-root">5</p></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ldarblu6-label">Cols</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="6" aria-valuemin="1" aria-valuenow="3"></div><div></div></div></div><input type="hidden" value="3"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Spacing</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ldarblu6-label">Vertical spacing</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">SimpleGrid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -22,7 +22,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="responsive-props" data-heading="Responsive props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-props">Responsive props</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cols</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">spacing</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">verticalSpacing</code> props support object notation for responsive values,
-it works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>: the object may have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">base</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>,
+it works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>: the object may have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">base</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>,
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sm</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xl</code> key, and values from those keys will be applied according to current
 viewport width.</p>
 <p class="MdxTypography_paragraph__Lp7wh">In the following example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">cols={{ base: 1, sm: 2, lg: 5 }}</code> means:</p>
@@ -48,4 +48,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">SimpleGrid</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Group</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/space"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Space</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/simple-grid","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/group/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Group</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/space/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Space</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/simple-grid","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/skeleton.html b/core/skeleton/index.html
similarity index 51%
rename from core/skeleton.html
rename to core/skeleton/index.html
index 6c092542a93..506acdf5690 100644
--- a/core/skeleton.html
+++ b/core/skeleton/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/skeleton-96afcb456c337307.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Skeleton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Indicate content loading state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Skeleton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Skeleton/Skeleton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/skeleton.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/skeleton-96afcb456c337307.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Skeleton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Indicate content loading state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Skeleton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Skeleton/Skeleton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/skeleton.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Skeleton</code> to create a placeholder for loading content. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Skeleton</code> support the following props:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> – height – any valid CSS value</li>
@@ -45,4 +45,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/ring-progress"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RingProgress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/affix"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Affix</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/skeleton","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/ring-progress/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RingProgress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/affix/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Affix</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/skeleton","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/slider.html b/core/slider/index.html
similarity index 78%
rename from core/slider.html
rename to core/slider/index.html
index cd52585a2b3..e2f061b22dd 100644
--- a/core/slider.html
+++ b/core/slider/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/slider-1be63797778126a7.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Slider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Slider and RangeSlider components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Slider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Slider/Slider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/slider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/slider-1be63797778126a7.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Slider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Slider and RangeSlider components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Slider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Slider/Slider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/slider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--slider-size:var(--slider-size-md);--slider-color:var(--mantine-color-blue-filled);--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2);margin-bottom:calc(2.5rem * var(--mantine-scale))" class="m-dd36362e mantine-Slider-root" data-size="md" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"></div><div><div style="--mark-offset:20%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel">20%</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel">50%</div></div><div style="--mark-offset:80%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel">80%</div></div></div></div></div><input type="hidden" value="40"/></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkgddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmdkgddarblu6-dropdown" id="mantine-Rtbmdkgddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(100% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:100%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="100"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R15kgddarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R15kgddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R15kgddarblu6">Show label on hover</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkgddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkgddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkgddarblu6">Label always on</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Slider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -85,7 +85,7 @@
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">label</code> – formatter function, accepts value as an argument, set null to disable label, defaults to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">f =&gt; f</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">labelAlwaysOn</code> – if true – label will always be displayed, by default label is visible only when user is dragging</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">labelTransitionProps</code> – props passed down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> component, can be used to customize label animation</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">labelTransitionProps</code> – props passed down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> component, can be used to customize label animation</li>
 </ul>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">No label</p><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"></div><div></div></div></div><input type="hidden" value="40"/></div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:var(--mantine-spacing-xl)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Formatted label</p><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"></div><div></div></div></div><input type="hidden" value="40"/></div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:var(--mantine-spacing-xl)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Label always visible</p><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"><div class="m-c9357328 mantine-Slider-label">40</div></div><div></div></div></div><input type="hidden" value="40"/></div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:var(--mantine-spacing-xl)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Custom label transition</p><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"></div><div></div></div></div><input type="hidden" value="40"/></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Slider</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -264,7 +264,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -272,7 +272,7 @@
  * Hover over selectors to apply outline styles
  *
  */</span></code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Example of using <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> styles:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of using <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> styles:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;padding-top:calc(0.9375rem * var(--mantine-scale));padding-bottom:calc(1.25rem * var(--mantine-scale));max-width:calc(25rem * var(--mantine-scale))" class=""><div style="--slider-size:calc(0.125rem * var(--mantine-scale));--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-7b015c03 m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(40% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:40%" class="mantine-focus-auto m-7afd1c8e m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"></div><div><div style="--mark-offset:20%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-88156515 m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-beb40edf m-68c77a5b mantine-Slider-markLabel">20%</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-88156515 m-dd33bc19 mantine-Slider-mark"></div><div class="m-beb40edf m-68c77a5b mantine-Slider-markLabel">50%</div></div><div style="--mark-offset:80%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-88156515 m-dd33bc19 mantine-Slider-mark"></div><div class="m-beb40edf m-68c77a5b mantine-Slider-markLabel">80%</div></div></div></div></div><input type="hidden" value="40"/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Slider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -292,7 +292,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="vertical-slider" data-heading="Vertical slider" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#vertical-slider">Vertical slider</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">RangeSlider</code> do not provide vertical orientation as it is very rarely used.
-If you need this feature you can build it yourself with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-move">use-move</a> hook.</p>
+If you need this feature you can build it yourself with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-move/">use-move</a> hook.</p>
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Slider</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">RangeSlider</code> components are accessible by default:</p>
 <ul class="MdxTypography_ul__pQ83b">
@@ -312,4 +312,4 @@
   );
 }</code></pre></div></div></div></div>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h2>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight/ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Increases slider value by one step</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft/ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Decreases slider value by one step</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Sets slider value to min value</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Sets slider value to max value</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/segmented-control"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SegmentedControl</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/switch"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Switch</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/slider","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight/ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Increases slider value by one step</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft/ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Decreases slider value by one step</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Sets slider value to min value</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Sets slider value to max value</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/segmented-control/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SegmentedControl</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/switch/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Switch</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/slider","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/space.html b/core/space/index.html
similarity index 55%
rename from core/space.html
rename to core/space/index.html
index 1e315c58eff..823496b942f 100644
--- a/core/space.html
+++ b/core/space/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/space-40fe502bbbca6d4c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Space</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Add horizontal or vertical spacing from theme</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Space</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Space/Space.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/space.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/space-40fe502bbbca6d4c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Space</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Add horizontal or vertical spacing from theme</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Space</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Space/Space.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/space.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Space</code> component to add horizontal or vertical spacing between elements:</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">First line</p><div style="height:var(--mantine-spacing-md);min-height:var(--mantine-spacing-md)" class=""></div><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Second line</p></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4lbblu6-label">H</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Space</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -38,4 +38,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">&lt;div&gt;<span class="hljs-title class_">First</span> line&lt;/div&gt;
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Space</span> <span class="hljs-attr">h</span>=<span class="hljs-string">&quot;md&quot;</span> /&gt;</span></span>
 <span class="hljs-comment">// Margin props are not available on div, use Space to add spacing from theme</span>
-<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Second line<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/simple-grid"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SimpleGrid</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stack"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stack</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/space","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Second line<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/simple-grid/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">SimpleGrid</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stack/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stack</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/space","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/spoiler.html b/core/spoiler/index.html
similarity index 52%
rename from core/spoiler.html
rename to core/spoiler/index.html
index 70fb383dfe4..7ab2c5e6ae4 100644
--- a/core/spoiler.html
+++ b/core/spoiler/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/spoiler-d359d8ddbe1a295d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Spoiler</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Hide long sections of content under a spoiler</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Spoiler</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Spoiler/Spoiler.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/spoiler.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/spoiler-d359d8ddbe1a295d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Spoiler</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Hide long sections of content under a spoiler</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Spoiler</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Spoiler/Spoiler.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/spoiler.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spoiler</code> to hide long section of content.
 Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxHeight</code> prop to control point at which content will be hidden under spoiler and show/hide control appears.
 If the content height is less than <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxHeight</code>, the spoiler will just render children.</p>
@@ -36,4 +36,4 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> spoilerControlRef = useRef&lt;<span class="hljs-title class_">HTMLButtonElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Spoiler</span> <span class="hljs-attr">controlRef</span>=<span class="hljs-string">{spoilerControlRef}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/kbd"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Kbd</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/theme-icon"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ThemeIcon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/spoiler","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/kbd/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Kbd</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/theme-icon/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ThemeIcon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/spoiler","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/stack.html b/core/stack/index.html
similarity index 51%
rename from core/stack.html
rename to core/stack/index.html
index 1bd039d55a8..62c709451af 100644
--- a/core/stack.html
+++ b/core/stack/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/stack-da1ec9dca090055f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Stack</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements and components in a vertical flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stack</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Stack/Stack.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/stack.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> is a vertical flex container. If you need a horizontal flex container, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group">Group</a>
-component instead. If you need to have full control over flex container properties, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/flex">Flex</a> component.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/stack-da1ec9dca090055f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Stack</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Compose elements and components in a vertical flex container</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stack</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Stack/Stack.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/stack.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> is a vertical flex container. If you need a horizontal flex container, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group/">Group</a>
+component instead. If you need to have full control over flex container properties, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/flex/">Flex</a> component.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:center;background:var(--mantine-color-blue-light);height:calc(18.75rem * var(--mantine-scale))" class="m-6d731127 mantine-Stack-root"><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">1</span></span></button><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">2</span></span></button><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">3</span></span></button></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rr9ldarblu6" id="mantine-Rr9ldarblu6-label">Align</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rr9ldarblu6"><option value="stretch" selected="">Stretch</option><option value="center">Center</option><option value="flex-start">Flex-start</option><option value="flex-end">Flex-end</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R1b9ldarblu6" id="mantine-R1b9ldarblu6-label">Justify</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-R1b9ldarblu6"><option value="center" selected="">Center</option><option value="flex-start">Flex-start</option><option value="flex-end">Flex-end</option><option value="space-between">Space-between</option><option value="space-around">Space-around</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1r9ldarblu6-label">Gap</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stack</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -20,4 +20,4 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Stack</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="browser-support" data-heading="Browser support" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#browser-support">Browser support</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> uses<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://caniuse.com/flexbox-gap">flexbox gap</a> to add spacing between children. In older browsers, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> children may not have spacing. You can install PostCSS<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/gavinmcfarland/flex-gap-polyfill">flex-gap-polyfill</a> <!-- -->to add support for older browsers.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/space"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Space</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/checkbox"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Checkbox</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/stack","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div id="browser-support" data-heading="Browser support" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#browser-support">Browser support</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> uses<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://caniuse.com/flexbox-gap">flexbox gap</a> to add spacing between children. In older browsers, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stack</code> children may not have spacing. You can install PostCSS<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/gavinmcfarland/flex-gap-polyfill">flex-gap-polyfill</a> <!-- -->to add support for older browsers.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/space/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Space</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/checkbox/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Checkbox</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/stack","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/stepper.html b/core/stepper/index.html
similarity index 82%
rename from core/stepper.html
rename to core/stepper/index.html
index 7eb5d6a16a8..d7376717a63 100644
--- a/core/stepper.html
+++ b/core/stepper/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/stepper-83022ee5bad2e6af.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Stepper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display content divided into a steps sequence</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stepper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Stepper/Stepper.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/stepper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/stepper-83022ee5bad2e6af.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Stepper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display content divided into a steps sequence</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stepper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Stepper/Stepper.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/stepper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-cbb4ea7e mantine-Stepper-root"><div class="m-aaf89d0b mantine-Stepper-steps" data-orientation="horizontal" data-icon-position="left" data-wrap="true"><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" data-allow-click="true" type="button" data-completed="true" tabindex="0"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon" data-completed="true"><span class="m-a79331dc mantine-Stepper-stepCompletedIcon" style="transition-property:transform, opacity;transition-duration:200ms;transition-timing-function:ease;transform-origin:center center;opacity:1;transform:scale(1)"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:60%;height:60%"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">First step</span><span class="m-164eea74 mantine-Stepper-stepDescription">Create an account</span></span></button><div class="m-2a371ac9 mantine-Stepper-separator" data-active="true" data-orientation="horizontal"></div><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" data-allow-click="true" type="button" data-progress="true" tabindex="0"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon" data-progress="true">2</span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">Second step</span><span class="m-164eea74 mantine-Stepper-stepDescription">Verify email</span></span></button><div class="m-2a371ac9 mantine-Stepper-separator" data-orientation="horizontal"></div><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" data-allow-click="true" type="button" tabindex="0"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon">3</span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">Final step</span><span class="m-164eea74 mantine-Stepper-stepDescription">Get full access</span></span></button></div><div class="m-78da155d mantine-Stepper-content"><div style="height:60px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--mantine-font-size-lg)" class="">Step 2 content: Verify email</div></div></div><div style="--group-justify:center;margin-top:var(--mantine-spacing-xl)" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Back</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Next step</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stepper</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -266,7 +266,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="loading-state" data-heading="Loading state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loading-state">Loading state</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">To indicate loading state set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop on Step component, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Loader</code> will replace step icon.
-You can configure the default loader in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>.</p>
+You can configure the default loader in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-cbb4ea7e mantine-Stepper-root"><div class="m-aaf89d0b mantine-Stepper-steps" data-orientation="horizontal" data-icon-position="left" data-wrap="true"><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" type="button" data-completed="true" tabindex="-1"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon" data-completed="true"><span class="m-a79331dc mantine-Stepper-stepCompletedIcon" style="transition-property:transform, opacity;transition-duration:200ms;transition-timing-function:ease;transform-origin:center center;opacity:1;transform:scale(1)"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:60%;height:60%"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">Step 1</span><span class="m-164eea74 mantine-Stepper-stepDescription">Create an account</span></span></button><div class="m-2a371ac9 mantine-Stepper-separator" data-active="true" data-orientation="horizontal"></div><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" type="button" data-progress="true" tabindex="-1"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon" data-progress="true"><span style="--loader-size:calc(var(--stepper-icon-size) / 2)" class="m-b34414df mantine-Stepper-stepLoader m-5ae2e3c mantine-Loader-root"></span></span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">Step 2</span><span class="m-164eea74 mantine-Stepper-stepDescription">Verify email</span></span></button><div class="m-2a371ac9 mantine-Stepper-separator" data-orientation="horizontal"></div><button class="mantine-focus-auto m-f56b1e2c m-cbb57068 mantine-Stepper-step m-87cf2631 mantine-UnstyledButton-root" data-icon-position="left" type="button" tabindex="-1"><span class="m-818e70b mantine-Stepper-stepWrapper"><span class="m-1959ad01 mantine-Stepper-stepIcon">3</span></span><span class="m-1956aa2a mantine-Stepper-stepBody" data-orientation="horizontal" data-icon-position="left"><span class="m-12051f6c mantine-Stepper-stepLabel">Step 3</span><span class="m-164eea74 mantine-Stepper-stepDescription">Get full access</span></span></button></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stepper</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -278,7 +278,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Stepper</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stepper</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Stepper</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -397,4 +397,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">&lt;<span class="hljs-title class_">Stepper</span>.<span class="hljs-property">Step</span> /&gt; <span class="hljs-comment">// -&gt; not ok, empty labels for screen reader</span>
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Stepper.Step</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Step 1&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;Create an account&quot;</span> /&gt;</span></span> <span class="hljs-comment">// -&gt; ok</span>
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Stepper.Step</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Create an account&quot;</span> /&gt;</span></span> <span class="hljs-comment">// -&gt; ok</span>
-<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Stepper.Step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Create an account&quot;</span> /&gt;</span></span> <span class="hljs-comment">// -&gt; ok</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pagination"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pagination</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tabs"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tabs</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/stepper","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Stepper.Step</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Create an account&quot;</span> /&gt;</span></span> <span class="hljs-comment">// -&gt; ok</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/pagination/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Pagination</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/tabs/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Tabs</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/stepper","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/switch.html b/core/switch/index.html
similarity index 72%
rename from core/switch.html
rename to core/switch/index.html
index 6d9df46f3be..c2f126c99ae 100644
--- a/core/switch.html
+++ b/core/switch/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/switch-f2596308b6d41afa.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Switch</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture boolean input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Switch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Switch/Switch.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/switch.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/switch-f2596308b6d41afa.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Switch</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture boolean input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Switch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Switch/Switch.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/switch.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--switch-radius:var(--mantine-radius-xl);--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-color:var(--mantine-color-blue-filled);--label-fz:var(--mantine-font-size-sm);--label-lh:var(--label-lh-sm)" class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-size="sm" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input id="mantine-Rl8ddarblu6" type="checkbox" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rl8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rl8ddarblu6">I agree to sell my privacy</label></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbm6q8ddarblu6-dropdown" id="mantine-Rtbm6q8ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8ddarblu6-label">Label position</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3maq8ddarblu6" id="mantine-R3maq8ddarblu6-right" data-focus-ring="auto" checked="" value="right"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3maq8ddarblu6-right">Right</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3maq8ddarblu6" id="mantine-R3maq8ddarblu6-left" data-focus-ring="auto" value="left"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3maq8ddarblu6-left">Left</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Req8ddarblu6" id="mantine-Req8ddarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Req8ddarblu6" value="I agree to sell my privacy"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riq8ddarblu6" id="mantine-Riq8ddarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riq8ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rmq8ddarblu6" id="mantine-Rmq8ddarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rmq8ddarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rqq8ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Ruq8ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(100% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:100%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="100"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R12q8ddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R12q8ddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R12q8ddarblu6">Disabled</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Switch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -127,7 +127,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Switch.Group</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Switch</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Switch</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -160,4 +160,4 @@
 <span class="hljs-comment">// -&gt; ok, input has associated label</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">AlsoGood</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Switch</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;I agree to everything&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/slider"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Slider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/textarea"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Textarea</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/switch","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/slider/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Slider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/textarea/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Textarea</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/switch","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/table.html b/core/table/index.html
similarity index 68%
rename from core/table.html
rename to core/table/index.html
index bcdf138597b..246f4a4f968 100644
--- a/core/table.html
+++ b/core/table/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/table-98fde90c1a0f0a65.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Table</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Render table with theme styles</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Table</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Table/Table.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/table.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/table-98fde90c1a0f0a65.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Table</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Render table with theme styles</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Table</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Table/Table.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/table.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Table data for all examples:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> elements = [
   { <span class="hljs-attr">position</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">mass</span>: <span class="hljs-number">12.011</span>, <span class="hljs-attr">symbol</span>: <span class="hljs-string">&#x27;C&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Carbon&#x27;</span> },
@@ -122,7 +122,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Table.ScrollContainer</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Table.ScrollContainer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea</a>, you can change it
+<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Table.ScrollContainer</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea</a>, you can change it
 to native scrollbars by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type=&quot;native&quot;</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--table-min-width:calc(31.25rem * var(--mantine-scale));--table-overflow:auto" class="m-a100c15 mantine-TableScrollContainer-scrollContainer"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Element position</th><th class="m-4e7aa4f3 mantine-Table-th">Element name</th><th class="m-4e7aa4f3 mantine-Table-th">Symbol</th><th class="m-4e7aa4f3 mantine-Table-th">Atomic mass</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">6</td><td class="m-4e7aa4ef mantine-Table-td">Carbon</td><td class="m-4e7aa4ef mantine-Table-td">C</td><td class="m-4e7aa4ef mantine-Table-td">12.011</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">7</td><td class="m-4e7aa4ef mantine-Table-td">Nitrogen</td><td class="m-4e7aa4ef mantine-Table-td">N</td><td class="m-4e7aa4ef mantine-Table-td">14.007</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">39</td><td class="m-4e7aa4ef mantine-Table-td">Yttrium</td><td class="m-4e7aa4ef mantine-Table-td">Y</td><td class="m-4e7aa4ef mantine-Table-td">88.906</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">56</td><td class="m-4e7aa4ef mantine-Table-td">Barium</td><td class="m-4e7aa4ef mantine-Table-td">Ba</td><td class="m-4e7aa4ef mantine-Table-td">137.33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">58</td><td class="m-4e7aa4ef mantine-Table-td">Cerium</td><td class="m-4e7aa4ef mantine-Table-td">Ce</td><td class="m-4e7aa4ef mantine-Table-td">140.12</td></tr></tbody></table></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Table</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -151,4 +151,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Table</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Table.ScrollContainer</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/mark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Mark</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Text</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/table","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/mark/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Mark</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Text</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/table","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/tabs.html b/core/tabs/index.html
similarity index 80%
rename from core/tabs.html
rename to core/tabs/index.html
index c562abe1e8d..23115a97c4a 100644
--- a/core/tabs.html
+++ b/core/tabs/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/tabs-baa5d76ab6567869.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Tabs</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Switch between different views</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Tabs/Tabs.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tabs.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/tabs-baa5d76ab6567869.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Tabs</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Switch between different views</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Tabs/Tabs.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tabs.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:100%;--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--tabs-radius:var(--mantine-radius-sm);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="default" data-orientation="horizontal" id="mantine-R1agddarblu6"><div class="m-576c9d4 m-89d33d6d mantine-Tabs-list" data-variant="default" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-539e827b m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R1agddarblu6-tab-gallery" aria-selected="true" tabindex="0" aria-controls="mantine-R1agddarblu6-panel-gallery"><span class="m-fc420b1f mantine-Tabs-tabSection" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-photo" style="width:calc(0.75rem * var(--mantine-scale));height:calc(0.75rem * var(--mantine-scale))"><path d="M15 8h.01"></path><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path></svg></span><span class="mantine-Tabs-tabLabel">Gallery</span></button><button class="mantine-focus-auto m-539e827b m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-R1agddarblu6-tab-messages" aria-selected="false" tabindex="-1" aria-controls="mantine-R1agddarblu6-panel-messages"><span class="m-fc420b1f mantine-Tabs-tabSection" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message-circle" style="width:calc(0.75rem * var(--mantine-scale));height:calc(0.75rem * var(--mantine-scale))"><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg></span><span class="mantine-Tabs-tabLabel">Messages</span></button><button class="mantine-focus-auto m-539e827b m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-R1agddarblu6-tab-settings" aria-selected="false" tabindex="-1" aria-controls="mantine-R1agddarblu6-panel-settings"><span class="m-fc420b1f mantine-Tabs-tabSection" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-settings" style="width:calc(0.75rem * var(--mantine-scale));height:calc(0.75rem * var(--mantine-scale))"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path></svg></span><span class="mantine-Tabs-tabLabel">Settings</span></button></div><div style="padding-top:var(--mantine-spacing-xs)" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1agddarblu6-panel-gallery" aria-labelledby="mantine-R1agddarblu6-tab-gallery">Gallery tab content</div><div style="display:none;padding-top:var(--mantine-spacing-xs)" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1agddarblu6-panel-messages" aria-labelledby="mantine-R1agddarblu6-tab-messages">Messages tab content</div><div style="display:none;padding-top:var(--mantine-spacing-xs)" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1agddarblu6-panel-settings" aria-labelledby="mantine-R1agddarblu6-tab-settings">Settings tab content</div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkgddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmdkgddarblu6-dropdown" id="mantine-Rtbmdkgddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkgddarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mlkgddarblu6" id="mantine-R3mlkgddarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mlkgddarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mlkgddarblu6" id="mantine-R3mlkgddarblu6-outline" data-focus-ring="auto" value="outline"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mlkgddarblu6-outline">Outline</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mlkgddarblu6" id="mantine-R3mlkgddarblu6-pills" data-focus-ring="auto" value="pills"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mlkgddarblu6-pills">Pills</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkgddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R15kgddarblu6-label">Orientation</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3n5kgddarblu6" id="mantine-R3n5kgddarblu6-horizontal" data-focus-ring="auto" checked="" value="horizontal"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3n5kgddarblu6-horizontal">Horizontal</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3n5kgddarblu6" id="mantine-R3n5kgddarblu6-vertical" data-focus-ring="auto" value="vertical"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3n5kgddarblu6-vertical">Vertical</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconPhoto</span>, <span class="hljs-title class_">IconMessageCircle</span>, <span class="hljs-title class_">IconSettings</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -289,7 +289,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Tabs</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -346,7 +346,7 @@
 <div id="accessibility" data-heading="Accessibility" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#accessibility">Accessibility</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Tabs component follows <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html">WAI-ARIA recommendations</a> on accessibility.</p>
 <p class="MdxTypography_paragraph__Lp7wh">If you use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs.Tab</code> without text content, for example, only with icon, then set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">aria-label</code>
-or use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden">VisuallyHidden</a> component:</p>
+or use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/visually-hidden/">VisuallyHidden</a> component:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconCoin</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -384,4 +384,4 @@
   );
 }</code></pre></div></div></div></div>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h2>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates next tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;horizontal&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates previous tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;horizontal&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates next tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;vertical&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates previous tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;vertical&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates first tab</td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates last tab</td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stepper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stepper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/alert"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Alert</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tabs","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td><td class="m-4e7aa4ef mantine-Table-td">Condition</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates next tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;horizontal&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates previous tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;horizontal&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates next tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;vertical&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates previous tab that is not disabled</td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientation=&quot;vertical&quot;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">Home</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates first tab</td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">End</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses and activates last tab</td><td class="m-4e7aa4ef mantine-Table-td">–</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/stepper/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Stepper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/alert/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Alert</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tabs","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/tags-input.html b/core/tags-input/index.html
similarity index 80%
rename from core/tags-input.html
rename to core/tags-input/index.html
index 0bacbd45a60..7b903e0597a 100644
--- a/core/tags-input.html
+++ b/core/tags-input/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/1347-e8c7bcc60db06dc5.js" defer=""></script><script src="/_next/static/chunks/pages/core/tags-input-71009298ace757e0.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TagsInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture a list of values from user with free input and suggestions</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TagsInput/TagsInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tags-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a>. You can find examples of custom <!-- -->tags input<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">the examples page</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/1347-e8c7bcc60db06dc5.js" defer=""></script><script src="/_next/static/chunks/pages/core/tags-input-71009298ace757e0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TagsInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture a list of values from user with free input and suggestions</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TagsInput/TagsInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tags-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="combobox" data-heading="Made with Combobox" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox">Made with Combobox</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> is an <b>opinionated</b> component built on top of<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a>. You can find examples of custom <!-- -->tags input<!-- --> <!-- -->components on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">the examples page</a>.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> provides a way to enter multiple values. It can be used with suggestions or without them.
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select">MultiSelect</a>, but it allows entering custom values.</p>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> is similar to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select/">MultiSelect</a>, but it allows entering custom values.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" for="mantine-Ragtdarblu6" id="mantine-Ragtdarblu6-label">Press Enter to submit a tag</label><div class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Enter tag" aria-haspopup="listbox" autoComplete="off" id="mantine-Ragtdarblu6" aria-invalid="false" value=""/></div></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -72,7 +72,7 @@
 <div id="with-suggestions" data-heading="With suggestions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#with-suggestions">With suggestions</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> can be used with suggestions, it will render suggestions list under input and allow to select
 suggestions with keyboard or mouse. Note that user is not limited to suggestions, it is still possible to
-enter custom values. If you want to allow values only from suggestions, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select">MultiSelect</a> component instead.</p>
+enter custom values. If you want to allow values only from suggestions, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/multi-select/">MultiSelect</a> component instead.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" for="mantine-Raktdarblu6" id="mantine-Raktdarblu6-label">Press Enter to submit a tag</label><div class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick tag from list" aria-haspopup="listbox" autoComplete="off" id="mantine-Raktdarblu6" aria-invalid="false" value=""/></div></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -184,10 +184,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="scrollable-dropdown" data-heading="Scrollable dropdown" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#scrollable-dropdown">Scrollable dropdown</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea.Autosize</a>.
+<p class="MdxTypography_paragraph__Lp7wh">By default, the options list is wrapped with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea.Autosize</a>.
 You can control dropdown max-height with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxDropdownHeight</code> prop if you do not change the default settings.</p>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to use native scrollbars, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withScrollArea={false}</code>. Note that in this case,
-you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+you will need to change dropdown styles with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" for="mantine-Rqntdarblu6" id="mantine-Rqntdarblu6-label">With scroll area (default)</label><div class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick value or enter anything" aria-haspopup="listbox" autoComplete="off" id="mantine-Rqntdarblu6" aria-invalid="false" value=""/></div></div></div></div><input type="hidden" value=""/><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" for="mantine-R1antdarblu6" id="mantine-R1antdarblu6-label">With native scroll</label><div class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick value or enter anything" aria-haspopup="listbox" autoComplete="off" id="mantine-R1antdarblu6" aria-invalid="false" value=""/></div></div></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">Array</span>(<span class="hljs-number">100</span>)
@@ -250,13 +250,13 @@
     /&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="combobox-props" data-heading="Combobox props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combobox-props">Combobox props</a></h2><p class="MdxTypography_paragraph__Lp7wh">You can override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/combobox/">Combobox</a> props with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">comboboxProps</code>. It is useful when you need to change some of the props that are not exposed by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code>, for example<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withinPortal</code>:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TagsInput</span> <span class="hljs-attr">comboboxProps</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">withinPortal:</span> <span class="hljs-attr">false</span> }} <span class="hljs-attr">data</span>=<span class="hljs-string">{[]}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TagsInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-TagsInput-label" data-variant="default" data-size="sm" for="mantine-R1aq5darblu6" id="mantine-R1aq5darblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-TagsInput-description" data-variant="default" data-size="sm" id="mantine-R1aq5darblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-padding-y:var(--input-padding-y-sm)" class="m-6c018570 mantine-Input-wrapper mantine-TagsInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-TagsInput-input" data-variant="default"><div style="--pg-gap:var(--pg-gap-sm)" class="mantine-TagsInput-pillsList m-1dcfd90b mantine-PillGroup-group" data-size="sm"><span style="--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm)" class="m-44da308b mantine-TagsInput-pill m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="sm" data-with-remove="true"><span class="m-1e0e6180 mantine-Pill-label">First</span><button class="mantine-focus-auto mantine-active m-ae386778 mantine-Pill-remove m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1" aria-hidden="true"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></span><span style="--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm)" class="m-44da308b mantine-TagsInput-pill m-7cda1cd6 mantine-Pill-root" data-variant="default" data-size="sm" data-with-remove="true"><span class="m-1e0e6180 mantine-Pill-label">Second</span><button class="mantine-focus-auto mantine-active m-ae386778 mantine-Pill-remove m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1" aria-hidden="true"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></span><input class="mantine-TagsInput-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="TagsInput placeholder" aria-haspopup="listbox" autoComplete="off" id="mantine-R1aq5darblu6" aria-invalid="false" aria-describedby="mantine-R1aq5darblu6-description" value=""/></div></div></div></div><input type="hidden" value="First,Second"/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkq5darblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkq5darblu6" id="mantine-R3mdkq5darblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R3mdkq5darblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkq5darblu6" id="mantine-R3mdkq5darblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkq5darblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R3mdkq5darblu6" id="mantine-R3mdkq5darblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R3mdkq5darblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rlkq5darblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rtkq5darblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R15kq5darblu6" id="mantine-R15kq5darblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R15kq5darblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R1dkq5darblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R1dkq5darblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R1dkq5darblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1lkq5darblu6" id="mantine-R1lkq5darblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1lkq5darblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1tkq5darblu6" id="mantine-R1tkq5darblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R1tkq5darblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TagsInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -322,7 +322,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TagsInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -352,4 +352,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TagsInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/select"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Select</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/action-icon"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ActionIcon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tags-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/select/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Select</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/action-icon/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ActionIcon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tags-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/text-input.html b/core/text-input/index.html
similarity index 66%
rename from core/text-input.html
rename to core/text-input/index.html
index 87a1de9c57b..5e305b0901f 100644
--- a/core/text-input.html
+++ b/core/text-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/text-input-b4ba27109341fe04.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TextInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture string input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TextInput/TextInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/text-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/text-input-b4ba27109341fe04.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TextInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture string input from user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TextInput/TextInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/text-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-variant="default" data-size="sm" for="mantine-Rakldarblu6" id="mantine-Rakldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-TextInput-description" data-variant="default" data-size="sm" id="mantine-Rakldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Input placeholder" aria-invalid="false" aria-describedby="mantine-Rakldarblu6-description" id="mantine-Rakldarblu6"/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd4ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d4ldarblu6" id="mantine-R9d4ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d4ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd4ldarblu6" id="mantine-Rdd4ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd4ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd4ldarblu6" id="mantine-Rfd4ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd4ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -70,7 +70,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Disabled input&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TextInput</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -100,4 +100,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/textarea"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Textarea</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/autocomplete"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Autocomplete</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/text-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/textarea/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Textarea</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/autocomplete/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Autocomplete</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/text-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/text.html b/core/text/index.html
similarity index 69%
rename from core/text.html
rename to core/text/index.html
index b7549ff85db..66ce191710b 100644
--- a/core/text.html
+++ b/core/text/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/text-98057227ac27eeb2.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Text</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display text</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Text/Text.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/text.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/text-98057227ac27eeb2.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Text</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display text</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Text/Text.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/text.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">Extra small text</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Small text</p><p style="--text-fz:var(--mantine-font-size-md);--text-lh:var(--mantine-line-height-md)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="md">Default text</p><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">Large text</p><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xl">Extra large text</p><p style="font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Semibold</p><p style="font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Bold</p><p style="font-style:italic" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Italic</p><p style="text-decoration:underline" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Underlined</p><p style="text-decoration:line-through" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Strikethrough</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Dimmed text</p><p style="color:var(--mantine-color-blue-filled)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Blue text</p><p style="color:var(--mantine-color-teal-4)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Teal 4 text</p><p style="text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Uppercase</p><p style="text-transform:capitalize" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">capitalized text</p><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Aligned to center</p><p style="text-align:right" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Aligned to right</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -29,7 +29,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> styles.</p>
+<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> styles.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl);--text-gradient:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);font-weight:900" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-variant="gradient" data-size="xl">Gradient Text</p></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6q8tdarblu6-label">Gradient from</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atmq8tdarblu6-dropdown" id="mantine-R7atmq8tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raq8tdarblu6-label">Gradient to</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7atqq8tdarblu6-dropdown" id="mantine-R7atqq8tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Req8tdarblu6-label">Gradient degree</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="360" aria-valuemin="0" aria-valuenow="90"></div><div></div></div></div><input type="hidden" value="90"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -71,7 +71,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Line clamp can also be used with any children (not only strings), for example with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider">TypographyStylesProvider</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Line clamp can also be used with any children (not only strings), for example with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider/">TypographyStylesProvider</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--text-line-clamp:3" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-line-clamp="true"><div class="m-d6493fad mantine-TypographyStylesProvider-root"><h3 style="margin-top:0">Line clamp with TypographyStylesProvider</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed corporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitis non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae perspiciatis.</p></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TypographyStylesProvider</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -93,20 +93,20 @@
 <div id="inherit-styles" data-heading="Inherit styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#inherit-styles">Inherit styles</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Text always applies font-size, font-family and line-height styles,
 but in some cases this is not a desired behavior. To force Text to inherit parent
-styles set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">inherit</code> prop. For example, highlight part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title">Title</a>:</p>
+styles set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">inherit</code> prop. For example, highlight part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title/">Title</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="3">Title in which you want to<!-- --> <span style="color:var(--mantine-color-blue-filled)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-inherit="true">highlight</span> <!-- -->something</h3></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Title</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Title</span> <span class="hljs-attr">order</span>=<span class="hljs-string">{3}</span>&gt;</span>Title in which you want to <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">span</span> <span class="hljs-attr">c</span>=<span class="hljs-string">&quot;blue&quot;</span> <span class="hljs-attr">inherit</span>&gt;</span>highlight<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span> something<span class="hljs-tag">&lt;/<span class="hljs-name">Title</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Text<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">TextProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyTextProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">TextProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">TextProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">TextProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="span-prop" data-heading="span prop" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#span-prop">span prop</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">span</code> prop as a shorthand for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component=&quot;span&quot;</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -118,4 +118,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;span&quot;</span>&gt;</span>Same as above<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/table"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Table</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/title"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Title</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/text","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/table/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Table</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/title/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Title</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/text","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/textarea.html b/core/textarea/index.html
similarity index 64%
rename from core/textarea.html
rename to core/textarea/index.html
index c20c4d6b3c7..4ad4ca6c30d 100644
--- a/core/textarea.html
+++ b/core/textarea/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/textarea-337fe3c42e9cc522.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Textarea</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Autosize or regular textarea</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Textarea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Textarea/Textarea.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/textarea.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">textarea</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/textarea-337fe3c42e9cc522.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Textarea</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Autosize or regular textarea</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Textarea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Textarea/Textarea.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/textarea.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">textarea</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-Textarea-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-Textarea-label" data-variant="default" data-size="sm" for="mantine-Rakldarblu6" id="mantine-Rakldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-Textarea-description" data-variant="default" data-size="sm" id="mantine-Rakldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm);--input-padding-y:var(--input-padding-y-sm)" class="m-6c018570 mantine-Input-wrapper mantine-Textarea-wrapper" data-variant="default" data-size="sm" data-multiline="true"><textarea class="m-8fb7ebe7 mantine-Input-input mantine-Textarea-input" data-variant="default" placeholder="Input placeholder" aria-invalid="false" aria-describedby="mantine-Rakldarblu6-description" id="mantine-Rakldarblu6"></textarea></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd4ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d4ldarblu6" id="mantine-R9d4ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d4ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd4ldarblu6" id="mantine-Rdd4ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd4ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd4ldarblu6" id="mantine-Rfd4ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd4ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Textarea</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -46,7 +46,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Textarea</span> <span class="hljs-attr">disabled</span>/&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Textarea</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -76,4 +76,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Textarea</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/switch"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Switch</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TextInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/textarea","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/switch/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Switch</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TextInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/textarea","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/theme-icon.html b/core/theme-icon/index.html
similarity index 63%
rename from core/theme-icon.html
rename to core/theme-icon/index.html
index 960c3237044..236b07dd8be 100644
--- a/core/theme-icon.html
+++ b/core/theme-icon/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/theme-icon-6fa8a65f3081967b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ThemeIcon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Render icon inside element with theme colors</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ThemeIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ThemeIcon/ThemeIcon.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/theme-icon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/theme-icon-6fa8a65f3081967b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">ThemeIcon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Render icon inside element with theme colors</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ThemeIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/ThemeIcon/ThemeIcon.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/theme-icon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true" data-striped="true"><div class="m-ad8eb9d6"><div style="display:flex;align-items:center;justify-content:center"><div style="--ti-size:var(--ti-size-md);--ti-radius:var(--mantine-radius-sm);--ti-bg:var(--mantine-color-blue-filled);--ti-color:var(--mantine-color-white);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-7341320d mantine-ThemeIcon-root" data-variant="filled" data-size="md" radius="sm" color="blue"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-photo" style="width:70%;height:70%"><path d="M15 8h.01"></path><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path></svg></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rr9ddarblu6" id="mantine-Rr9ddarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rr9ddarblu6"><option value="filled" selected="">Filled</option><option value="light">Light</option><option value="outline">Outline</option><option value="default">Default</option><option value="white">White</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1b9ddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1r9ddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(50% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:50%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="50"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R2b9ddarblu6-label">Color</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1qneb9ddarblu6-dropdown" id="mantine-R1qneb9ddarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ThemeIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconPhoto</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -14,7 +14,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">ThemeIcon</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ThemeIcon</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ThemeIcon</code> styles.</p>
+<div id="gradient-variant" data-heading="Gradient variant" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#gradient-variant">Gradient variant</a></h2><p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>, you can control gradient with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop, it accepts an object with<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">from</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">to</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">deg</code> properties. If the<code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> prop is not set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ThemeIcon</code> will use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> which can be configured on the<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code> <!-- -->prop is ignored when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">gradient</code>.</p><p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code> supports only linear gradients with two colors. If you need a more complex gradient, then use<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to modify<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ThemeIcon</code> styles.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--ti-size:var(--ti-size-xl);--ti-bg:linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--ti-color:var(--mantine-color-white);--ti-bd:none" class="m-7341320d mantine-ThemeIcon-root" data-variant="gradient" data-size="xl" aria-label="Gradient action icon" gradient="[object Object]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart"><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"></path></svg></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rr9tdarblu6-label">Gradient from</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbmr9tdarblu6-dropdown" id="mantine-Rtbmr9tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="color"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1b9tdarblu6-label">Gradient to</div><div style="--group-gap:calc(0.125rem * var(--mantine-scale));--group-wrap:wrap;margin-top:calc(0.125rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="gray"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-gray-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="red"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-red-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="pink"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-pink-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="grape"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-grape-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="violet"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-violet-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="indigo"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-indigo-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="blue"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-blue-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="cyan"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-cyan-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-f9decbb8"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="teal"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-teal-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="green"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-green-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="lime"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-lime-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="yellow"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-yellow-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button style="--cs-radius:var(--mantine-radius-sm)" class="mantine-focus-auto m-5e1a038c m-de3d2490 mantine-ColorSwatch-root" aria-label="orange"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:var(--mantine-color-orange-filled)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></button><button class="mantine-focus-auto m-2f5f7bca m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Pick color" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtbnb9tdarblu6-dropdown" id="mantine-Rtbnb9tdarblu6-target"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#FF5178" d="M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"></path><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"></path><path fill="#FFD23B" d="M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"></path><path fill="#89C247" d="M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"></path><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"></path><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"></path><path fill="#3EC3FF" d="M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"></path><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"></path><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"></path><path fill="#622876" d="M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"></path><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"></path><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"></path></svg></button></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R1r9tdarblu6-label">Gradient degree</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="360" aria-valuemin="0" aria-valuenow="90"></div><div></div></div></div><input type="hidden" value="90"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ThemeIcon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -29,4 +29,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">IconHeart</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">ThemeIcon</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/spoiler"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spoiler</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/timeline"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Timeline</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/theme-icon","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/spoiler/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spoiler</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/timeline/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Timeline</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/theme-icon","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/timeline.html b/core/timeline/index.html
similarity index 67%
rename from core/timeline.html
rename to core/timeline/index.html
index 19f3d9d41f0..e4f9f069c29 100644
--- a/core/timeline.html
+++ b/core/timeline/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/timeline-8d8da156751d8a75.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Timeline</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display list of events in chronological order</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Timeline</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Timeline/Timeline.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/timeline.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/timeline-8d8da156751d8a75.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Timeline</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Display list of events in chronological order</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Timeline</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Timeline/Timeline.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/timeline.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(20rem * var(--mantine-scale))" class=""><div style="--tl-bullet-size:calc(1.5rem * var(--mantine-scale));--tl-line-width:calc(0.125rem * var(--mantine-scale))" class="m-43657ece mantine-Timeline-root" data-align="left"><div class="m-436178ff mantine-Timeline-item" data-line-active="true" data-active="true"><div class="m-8affcee1 mantine-Timeline-itemBullet" data-with-child="true" data-align="left" data-active="true"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-git-branch"><path d="M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M7 8l0 8"></path><path d="M9 18h6a2 2 0 0 0 2 -2v-5"></path><path d="M14 14l3 -3l3 3"></path></svg></div><div class="m-540e8f41 mantine-Timeline-itemBody"><div class="m-2ebe8099 mantine-Timeline-itemTitle">New branch</div><div class="mantine-Timeline-itemContent"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">You&#x27;ve created new branch<!-- --> <span class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-variant="link" data-inherit="true">fix-notifications</span> <!-- -->from master</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.25rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">2 hours ago</p></div></div></div><div class="m-436178ff mantine-Timeline-item" data-active="true"><div class="m-8affcee1 mantine-Timeline-itemBullet" data-with-child="true" data-align="left" data-active="true"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-git-commit"><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M12 3l0 6"></path><path d="M12 15l0 6"></path></svg></div><div class="m-540e8f41 mantine-Timeline-itemBody"><div class="m-2ebe8099 mantine-Timeline-itemTitle">Commits</div><div class="mantine-Timeline-itemContent"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">You&#x27;ve pushed 23 commits to<!-- --> <span class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-variant="link" data-inherit="true">fix-notifications</span> <!-- -->branch</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.25rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">52 minutes ago</p></div></div></div><div style="--tli-border-style:dashed" class="m-436178ff mantine-Timeline-item"><div class="m-8affcee1 mantine-Timeline-itemBullet" data-with-child="true" data-align="left"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-git-pull-request"><path d="M6 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M6 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M18 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M6 8l0 8"></path><path d="M11 6h5a2 2 0 0 1 2 2v8"></path><path d="M14 9l-3 -3l3 -3"></path></svg></div><div class="m-540e8f41 mantine-Timeline-itemBody"><div class="m-2ebe8099 mantine-Timeline-itemTitle">Pull request</div><div class="mantine-Timeline-itemContent"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">You&#x27;ve submitted a pull request<!-- --> <span class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-variant="link" data-inherit="true">Fix incorrect notification message (#187)</span> </p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.25rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">34 minutes ago</p></div></div></div><div class="m-436178ff mantine-Timeline-item"><div class="m-8affcee1 mantine-Timeline-itemBullet" data-with-child="true" data-align="left"><svg xmlns="http://www.w3.org/2000/svg" width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message-dots"><path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path><path d="M12 11l0 .01"></path><path d="M8 11l0 .01"></path><path d="M16 11l0 .01"></path></svg></div><div class="m-540e8f41 mantine-Timeline-itemBody"><div class="m-2ebe8099 mantine-Timeline-itemTitle">Code review</div><div class="mantine-Timeline-itemContent"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm"><span class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-variant="link" data-inherit="true">Robert Gluesticker</span> <!-- -->left a code review on your pull request</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.25rem * var(--mantine-scale))" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">12 minutes ago</p></div></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Timeline</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconGitBranch</span>, <span class="hljs-title class_">IconGitPullRequest</span>, <span class="hljs-title class_">IconGitCommit</span>, <span class="hljs-title class_">IconMessageDots</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -131,4 +131,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Timeline.Item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Regular item&quot;</span>&gt;</span>Third item<span class="hljs-tag">&lt;/<span class="hljs-name">Timeline.Item</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Timeline</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/theme-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ThemeIcon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/blockquote"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Blockquote</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/timeline","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/theme-icon/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ThemeIcon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/blockquote/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Blockquote</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/timeline","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/title.html b/core/title/index.html
similarity index 51%
rename from core/title.html
rename to core/title/index.html
index 24619174e3c..13d36a1a68d 100644
--- a/core/title.html
+++ b/core/title/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/title-8dae48ba8bd0bd6e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Title</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">h1-h6 heading</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Title</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Title/Title.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/title.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Use Title component to render h1-h6 headings with Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> styles.
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/title-8dae48ba8bd0bd6e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Title</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">h1-h6 heading</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Title</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Title/Title.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/title.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">Use Title component to render h1-h6 headings with Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> styles.
 By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Title</code> has no margins and paddings.
-You can change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-weight</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code> per heading with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/typography">theme.headings</a>.</p>
+You can change <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-weight</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code> per heading with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/typography/">theme.headings</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">order</code> prop to render a specific element (h1-h6), default order is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="1">This is h1 title</h1><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="2">This is h2 title</h2><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="3">This is h3 title</h3><h4 style="--title-fw:var(--mantine-h4-font-weight);--title-lh:var(--mantine-h4-line-height);--title-fz:var(--mantine-h4-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="4">This is h4 title</h4><h5 style="--title-fw:var(--mantine-h5-font-weight);--title-lh:var(--mantine-h5-line-height);--title-fz:var(--mantine-h5-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="5">This is h5 title</h5><h6 style="--title-fw:var(--mantine-h6-font-weight);--title-lh:var(--mantine-h6-line-height);--title-fz:var(--mantine-h6-font-size)" class="m-8a5d1357 mantine-Title-root" data-order="6">This is h6 title</h6></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Title</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -25,7 +25,7 @@
 <div id="size" data-heading="Size" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#size">Size</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can change Title <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> independent of its <code class="m-b183c0a2 mantine-Code-root" dir="ltr">order</code>:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">If you set size to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h1</code>-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">h6</code>, then component will add corresponding <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code> from the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a></li>
+<li class="MdxTypography_li__JpNrx">If you set size to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">h1</code>-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">h6</code>, then component will add corresponding <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code> from the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a></li>
 <li class="MdxTypography_li__JpNrx">If you set size to any other value, then <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code> will be calculated based on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">order</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> will impact only <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code></li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><h3 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m-8a5d1357 mantine-Title-root" data-size="h1" data-order="3">H3 heading with h1 font-size</h3><h1 style="--title-fw:var(--mantine-h4-font-weight);--title-lh:var(--mantine-h4-line-height);--title-fz:var(--mantine-h4-font-size)" class="m-8a5d1357 mantine-Title-root" data-size="h4" data-order="1">H1 heading with h4 font-size</h1><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:calc(0.75rem * var(--mantine-scale))" class="m-8a5d1357 mantine-Title-root" data-order="1">H1 heading with <!-- -->calc(0.75rem * var(--mantine-scale))<!-- --> size</h1></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Title</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -40,4 +40,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Title</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;calc(0.75rem * var(--mantine-scale))&quot;</span>&gt;</span>H1 heading with calc(0.75rem * var(--mantine-scale)) size<span class="hljs-tag">&lt;/<span class="hljs-name">Title</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Text</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/typography-styles-provider"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TypographyStylesProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/title","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/text/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Text</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/typography-styles-provider/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TypographyStylesProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/title","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/tooltip.html b/core/tooltip/index.html
similarity index 77%
rename from core/tooltip.html
rename to core/tooltip/index.html
index 42d791a4270..97b137b2141 100644
--- a/core/tooltip.html
+++ b/core/tooltip/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/tooltip-5caa911ef4125ef8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Tooltip</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders tooltip at given element on mouse over or other event</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Tooltip/Tooltip.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tooltip.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/tooltip-5caa911ef4125ef8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Tooltip</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Renders tooltip at given element on mouse over or other event</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Tooltip/Tooltip.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/tooltip.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button with tooltip</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -171,7 +171,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="multiline" data-heading="Multiline" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#multiline">Multiline</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To enable multiline mode, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">multiline</code> prop to enable line breaks and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> to set tooltip width:</p>
+<p class="MdxTypography_paragraph__Lp7wh">To enable multiline mode, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">multiline</code> prop to enable line breaks and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">w</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> to set tooltip width:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Multiline tooltip</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -207,7 +207,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-transition" data-heading="Change transition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-transition">Change transition</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Tooltip is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition">Transition</a> component, it supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code> props:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Tooltip is built with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/transition/">Transition</a> component, it supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transitionProps</code> props:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -333,4 +333,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>&gt;</span>Button with tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Tooltip</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/popover"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Popover</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/accordion"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Accordion</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tooltip","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/popover/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Popover</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/accordion/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Accordion</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/tooltip","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/transition.html b/core/transition/index.html
similarity index 53%
rename from core/transition.html
rename to core/transition/index.html
index 1ba34959614..3a055030e5c 100644
--- a/core/transition.html
+++ b/core/transition/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/transition-dc716c3c449ce1d2.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Transition</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Animate presence of component with pre-made animations</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Transition</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Transition/Transition.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/transition.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="premade-transitions" data-heading="Premade transitions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#premade-transitions">Premade transitions</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/transition-dc716c3c449ce1d2.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Transition</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Animate presence of component with pre-made animations</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Transition</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/Transition/Transition.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/transition.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="premade-transitions" data-heading="Premade transitions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#premade-transitions">Premade transitions</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine includes several premade transitions:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center;cursor:default" class="m-4081bf90 mantine-Group-root"><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">fade</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">scale</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">scale-y</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">scale-x</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">skew-up</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">skew-down</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">rotate-left</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">rotate-right</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">slide-down</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">slide-up</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">slide-left</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">slide-right</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">pop</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">pop-bottom-left</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">pop-bottom-right</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">pop-top-left</span></div><div style="--badge-bg:var(--mantine-color-blue-light);--badge-color:var(--mantine-color-blue-light-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="light"><span class="m-5add502a mantine-Badge-label">pop-top-right</span></div></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">To use one of them set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transition</code> property to one of these values:</p>
@@ -71,4 +71,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Transition</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/scroll-area"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ScrollArea</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/visually-hidden"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">VisuallyHidden</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/transition","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/scroll-area/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">ScrollArea</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/visually-hidden/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">VisuallyHidden</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/transition","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/typography-styles-provider.html b/core/typography-styles-provider/index.html
similarity index 53%
rename from core/typography-styles-provider.html
rename to core/typography-styles-provider/index.html
index e67fa59887b..79f3e838882 100644
--- a/core/typography-styles-provider.html
+++ b/core/typography-styles-provider/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/typography-styles-provider-1bdf6cbeedd4f8bb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TypographyStylesProvider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Styles provider for html content</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TypographyStylesProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TypographyStylesProvider/TypographyStylesProvider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/typography-styles-provider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/typography-styles-provider-1bdf6cbeedd4f8bb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TypographyStylesProvider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Styles provider for html content</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TypographyStylesProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/TypographyStylesProvider/TypographyStylesProvider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/typography-styles-provider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine does not include typography global styles.
 Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TypographyStylesProvider</code> to add typography styles to your html content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TypographyStylesProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -99,4 +99,4 @@ <h6>Heading 6</h6>
   return &lt;Avatar src={image} alt="it's me" /&gt;;
 }</pre>
 
-<table><thead><tr><th>Element position</th><th>Element name</th><th>Symbol</th><th>Atomic mass</th></tr></thead><tbody><tr><td>6</td><td>Carbon</td><td>C</td><td>12.011</td></tr><tr><td>7</td><td>Nitrogen</td><td>N</td><td>14.007</td></tr><tr><td>39</td><td>Yttrium</td><td>Y</td><td>88.906</td></tr><tr><td>56</td><td>Barium</td><td>Ba</td><td>137.33</td></tr><tr><td>58</td><td>Cerium</td><td>Ce</td><td>140.12</td></tr></tbody></table></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Title</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/box"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Box</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/typography-styles-provider","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<table><thead><tr><th>Element position</th><th>Element name</th><th>Symbol</th><th>Atomic mass</th></tr></thead><tbody><tr><td>6</td><td>Carbon</td><td>C</td><td>12.011</td></tr><tr><td>7</td><td>Nitrogen</td><td>N</td><td>14.007</td></tr><tr><td>39</td><td>Yttrium</td><td>Y</td><td>88.906</td></tr><tr><td>56</td><td>Barium</td><td>Ba</td><td>137.33</td></tr><tr><td>58</td><td>Cerium</td><td>Ce</td><td>140.12</td></tr></tbody></table></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/title/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Title</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/box/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Box</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/typography-styles-provider","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/unstyled-button.html b/core/unstyled-button/index.html
similarity index 51%
rename from core/unstyled-button.html
rename to core/unstyled-button/index.html
index 74c0ac447d2..294df73a34f 100644
--- a/core/unstyled-button.html
+++ b/core/unstyled-button/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/unstyled-button-7146d474dae0fe5b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">UnstyledButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Unstyled polymorphic button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">UnstyledButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/UnstyledButton/UnstyledButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/unstyled-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/unstyled-button-7146d474dae0fe5b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">UnstyledButton</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Unstyled polymorphic button</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">UnstyledButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Polymorphic</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-switch-2" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg></div>Polymorphic component</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/UnstyledButton/UnstyledButton.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/unstyled-button.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">UnstyledButton</code> 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.</p>
@@ -12,18 +12,18 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">UnstyledButton</span>&gt;</span>Button without styles<span class="hljs-tag">&lt;/<span class="hljs-name">UnstyledButton</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">UnstyledButton</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">UnstyledButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div id="polymorphic-component" data-heading="Polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#polymorphic-component">Polymorphic component</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">UnstyledButton</code> is a<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic component</a> – its default root element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code>, but it can be changed to any other element or component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop:</p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">UnstyledButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">UnstyledButton</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div><blockquote style="--bq-bg-light:rgba(49, 120, 198, 0.07);--bq-bg-dark:rgba(49, 120, 198, 0.06);--bq-bd:#3178C6;--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md" color="#3178C6"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><path fill="#3178C6" d="M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"></path><path fill="#FFF" d="M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"></path></svg></span><p class="MdxTypography_paragraph__Lp7wh"><strong>Polymorphic components with TypeScript</strong></p><p class="MdxTypography_paragraph__Lp7wh">Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">UnstyledButton<!-- -->Props</code> does not extend<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef<!-- -->&#x27;&lt;&#x27;<!-- -->div<!-- -->&#x27;&gt;&#x27;</code> <!-- -->although <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> is the default element.</p><p class="MdxTypography_paragraph__Lp7wh">If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop), then your component props interface should extend HTML element props, for example:<!-- --> </p><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">UnstyledButtonProps</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyUnstyledButtonProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">UnstyledButtonProps</span>,
-  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">UnstyledButtonProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">this guide</a>.</p></blockquote>
+  <span class="hljs-title class_">ElementProps</span>&lt;&#x27;a&#x27;, keyof <span class="hljs-title class_">UnstyledButtonProps</span>&gt; {}</code></pre></div></div></div></div><p class="MdxTypography_paragraph__Lp7wh">If you want your component to remain polymorphic after wrapping, use<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function described in<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">this guide</a>.</p></blockquote>
 <div id="get-element-ref" data-heading="Get element ref" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-element-ref">Get element ref</a></h2><div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">UnstyledButton</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">const</span> ref = useRef&lt;<span class="hljs-title class_">HTMLButtonElement</span>&gt;(<span class="hljs-literal">null</span>);
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">UnstyledButton</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/anchor"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Anchor</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/unstyled-button","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/file-button/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">FileButton</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/anchor/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Anchor</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/unstyled-button","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/visually-hidden.html b/core/visually-hidden.html
deleted file mode 100644
index bef917904d8..00000000000
--- a/core/visually-hidden.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>VisuallyHidden | Mantine</title><meta name="description" content="Hide element visually but keep it accessible for screen readers"/><meta name="og:title" content="VisuallyHidden | Mantine"/><meta name="og:description" content="Hide element visually but keep it accessible for screen readers"/><meta name="twitter:title" content="VisuallyHidden | Mantine"/><meta name="twitter:description" content="Hide element visually but keep it accessible for screen readers"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/visually-hidden-dbd5f7abc439afe7.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/visually-hidden">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">VisuallyHidden</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Hide element visually but keep it accessible for screen readers</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/VisuallyHidden/VisuallyHidden.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/visually-hidden.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">VisuallyHidden</code> is a utility component that hides content visually but leaves it available to screen readers.</p>
-<p class="MdxTypography_paragraph__Lp7wh">For example, it can be used with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a> component:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-<span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ActionIcon</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">IconHeart</span> /&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">VisuallyHidden</span>&gt;</span>Like post<span class="hljs-tag">&lt;/<span class="hljs-name">VisuallyHidden</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Transition</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/getting-started"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Getting started</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/visually-hidden","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/core/visually-hidden/index.html b/core/visually-hidden/index.html
new file mode 100644
index 00000000000..52693f22253
--- /dev/null
+++ b/core/visually-hidden/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>VisuallyHidden | Mantine</title><meta name="description" content="Hide element visually but keep it accessible for screen readers"/><meta name="og:title" content="VisuallyHidden | Mantine"/><meta name="og:description" content="Hide element visually but keep it accessible for screen readers"/><meta name="twitter:title" content="VisuallyHidden | Mantine"/><meta name="twitter:description" content="Hide element visually but keep it accessible for screen readers"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/core/visually-hidden-dbd5f7abc439afe7.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><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"></path><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"></path><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"></path></svg>layout</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/app-shell/">AppShell</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/aspect-ratio/">AspectRatio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/center/">Center</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/container/">Container</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/flex/">Flex</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/grid/">Grid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/group/">Group</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/simple-grid/">SimpleGrid</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/space/">Space</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stack/">Stack</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>inputs</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/checkbox/">Checkbox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/chip/">Chip</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-input/">ColorInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-picker/">ColorPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/fieldset/">Fieldset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-input/">FileInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/input/">Input</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/json-input/">JsonInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/native-select/">NativeSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/number-input/">NumberInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/password-input/">PasswordInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pin-input/">PinInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/radio/">Radio</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/rating/">Rating</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/segmented-control/">SegmentedControl</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/slider/">Slider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/switch/">Switch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/textarea/">Textarea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text-input/">TextInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>combobox</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/autocomplete/">Autocomplete</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/combobox/">Combobox</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/multi-select/">MultiSelect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pill/">Pill</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pills-input/">PillsInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/select/">Select</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tags-input/">TagsInput</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>buttons</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/action-icon/">ActionIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/button/">Button</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/close-button/">CloseButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/copy-button/">CopyButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/file-button/">FileButton</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/unstyled-button/">UnstyledButton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg>navigation</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/anchor/">Anchor</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/breadcrumbs/">Breadcrumbs</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/burger/">Burger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/nav-link/">NavLink</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/pagination/">Pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/stepper/">Stepper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tabs/">Tabs</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M18 8a3 3 0 0 1 0 6"></path><path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5"></path><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"></path></svg>feedback</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/alert/">Alert</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loader/">Loader</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/notification/">Notification</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/progress/">Progress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/ring-progress/">RingProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/skeleton/">Skeleton</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>overlays</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/affix/">Affix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/dialog/">Dialog</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/drawer/">Drawer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/hover-card/">HoverCard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/loading-overlay/">LoadingOverlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/menu/">Menu</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/modal/">Modal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/overlay/">Overlay</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/popover/">Popover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/tooltip/">Tooltip</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg>Data display</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/accordion/">Accordion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/avatar/">Avatar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/background-image/">BackgroundImage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/badge/">Badge</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/card/">Card</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/color-swatch/">ColorSwatch</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/image/">Image</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/indicator/">Indicator</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/kbd/">Kbd</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/spoiler/">Spoiler</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/theme-icon/">ThemeIcon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/timeline/">Timeline</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><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"></path><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>typography</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/blockquote/">Blockquote</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/code/">Code</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/highlight/">Highlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/list/">List</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/mark/">Mark</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/table/">Table</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/text/">Text</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/title/">Title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/typography-styles-provider/">TypographyStylesProvider</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12l3 3l3 -3l-3 -3z"></path><path d="M15 12l3 3l3 -3l-3 -3z"></path><path d="M9 6l3 3l3 -3l-3 -3z"></path><path d="M9 18l3 3l3 -3l-3 -3z"></path></svg>misc</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/box/">Box</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/collapse/">Collapse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/divider/">Divider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/focus-trap/">FocusTrap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/paper/">Paper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/portal/">Portal</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/scroll-area/">ScrollArea</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/core/transition/">Transition</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/core/visually-hidden/">VisuallyHidden</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">VisuallyHidden</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Hide element visually but keep it accessible for screen readers</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-core/src/components/VisuallyHidden/VisuallyHidden.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/core/visually-hidden.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/core"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/core</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">VisuallyHidden</code> is a utility component that hides content visually but leaves it available to screen readers.</p>
+<p class="MdxTypography_paragraph__Lp7wh">For example, it can be used with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a> component:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, <span class="hljs-title class_">VisuallyHidden</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHeart</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ActionIcon</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">IconHeart</span> /&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">VisuallyHidden</span>&gt;</span>Like post<span class="hljs-tag">&lt;/<span class="hljs-name">VisuallyHidden</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon</span>&gt;</span></span>
+  );
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/transition/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Transition</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/getting-started/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Getting started</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/core/visually-hidden","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/calendar.html b/dates/calendar/index.html
similarity index 76%
rename from dates/calendar.html
rename to dates/calendar/index.html
index c3e865eebe8..4881311d0d5 100644
--- a/dates/calendar.html
+++ b/dates/calendar/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/pages/dates/calendar-338fc214c6fde174.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Calendar</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for custom date pickers</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/Calendar/Calendar.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/calendar.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> component to create custom date pickers if <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a>
-component does not meet your requirements. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/pages/dates/calendar-338fc214c6fde174.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Calendar</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Base component for custom date pickers</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/Calendar/Calendar.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/calendar.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> component to create custom date pickers if <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a>
+component does not meet your requirements. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> supports all <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a>
 props and some other props that are listed in props table – check it out to learn about all component features.</p>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> component but does not
+<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> works the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> component but does not
 include any logic of dates selection:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Calendar</span> /&gt;</span></span>;
@@ -17,7 +17,7 @@
 <div id="custom-date-pickers" data-heading="Custom date pickers" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-date-pickers">Custom date pickers</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Calendar</code> as a base for custom date pickers. For example, you can create a date picker
 that allows user to pick three or less dates:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> dayjs <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dayjs&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> dayjs <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dayjs&#x27;</span>;
 <span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -42,7 +42,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Another custom date picker example – week picker:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-Calendar-monthCell"><button class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 <span class="hljs-keyword">import</span> dayjs <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dayjs&#x27;</span>;
 
@@ -95,7 +95,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">static</code> 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.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="28 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="29 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="30 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="31 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>31</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="1 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="2 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>2</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="3 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>3</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="4 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>4</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="5 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>5</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="6 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>6</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="7 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>7</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="8 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>8</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="9 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>9</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="10 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>10</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="11 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>11</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="12 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>12</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="13 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>13</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="14 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>14</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="15 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>15</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="16 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div class="m-760d1fb1 mantine-Indicator-indicator"></div><div>16</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="17 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>17</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-today="true" data-static="true" aria-label="18 September 2023" tabindex="0"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>18</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="19 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>19</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="20 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>20</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="21 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>21</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="22 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>22</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="23 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>23</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="24 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>24</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="25 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>25</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="26 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>26</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="27 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>27</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="28 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="29 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="30 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="1 October 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></div></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-Calendar-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-Calendar-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-Calendar-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-Calendar-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-Calendar-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-Calendar-month"><thead class="mantine-Calendar-monthThead"><tr class="mantine-Calendar-weekdaysRow"><th class="m-18a3eca mantine-Calendar-weekday">Mo</th><th class="m-18a3eca mantine-Calendar-weekday">Tu</th><th class="m-18a3eca mantine-Calendar-weekday">We</th><th class="m-18a3eca mantine-Calendar-weekday">Th</th><th class="m-18a3eca mantine-Calendar-weekday">Fr</th><th class="m-18a3eca mantine-Calendar-weekday">Sa</th><th class="m-18a3eca mantine-Calendar-weekday">Su</th></tr></thead><tbody class="mantine-Calendar-monthTbody"><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="28 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="29 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="30 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="31 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>31</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="1 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="2 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>2</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="3 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>3</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="4 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>4</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="5 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>5</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="6 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>6</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="7 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>7</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="8 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>8</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="9 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>9</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="10 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>10</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="11 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>11</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="12 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>12</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="13 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>13</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="14 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>14</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="15 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>15</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="16 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div class="m-760d1fb1 mantine-Indicator-indicator"></div><div>16</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="17 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>17</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="18 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>18</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-today="true" data-static="true" aria-label="19 September 2023" tabindex="0"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>19</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="20 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>20</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="21 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>21</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="22 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>22</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="23 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>23</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="24 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>24</div></div></div></td></tr><tr class="mantine-Calendar-monthRow"><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="25 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>25</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="26 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>26</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="27 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>27</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="28 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-static="true" aria-label="29 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-weekend="true" data-static="true" aria-label="30 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></div></td><td class="m-8f457cd5 mantine-Calendar-monthCell" data-with-spacing="true"><div class="mantine-focus-auto m-396ce5cb mantine-Calendar-day m-87cf2631 mantine-UnstyledButton-root" data-outside="true" data-static="true" aria-label="1 October 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.125rem * var(--mantine-scale));--indicator-right:calc(-0.125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></div></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -112,4 +112,4 @@
       }}
     /&gt;</span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/dates-provider"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatesProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/calendar","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/dates-provider/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatesProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/calendar","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/date-input.html b/dates/date-input/index.html
similarity index 74%
rename from dates/date-input.html
rename to dates/date-input/index.html
index c9e8270b9a5..8b60033fbde 100644
--- a/dates/date-input.html
+++ b/dates/date-input/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-input-3a36cdfb91382cfe.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DateInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Free form date input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DateInput/DateInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> props,
-read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-input-3a36cdfb91382cfe.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DateInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Free form date input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DateInput/DateInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> props,
+read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateInput-label" for="mantine-Rd8tdarblu6" id="mantine-Rd8tdarblu6-label">Date input</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-DateInput-input" data-variant="default" data-dates-input="true" autoComplete="off" placeholder="Date input" aria-invalid="false" id="mantine-Rd8tdarblu6" value=""/></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
@@ -72,7 +72,7 @@
 <div id="allow-clear" data-heading="Allow clear" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#allow-clear">Allow clear</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">clearable</code> prop to allow removing value from the input. Input will be cleared if
 user selects the same date in dropdown or clears input value:</p>
-<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateInput-label" for="mantine-Rdbtdarblu6" id="mantine-Rdbtdarblu6-label">Date input</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-DateInput-input" data-variant="default" data-dates-input="true" autoComplete="off" placeholder="Date input" aria-invalid="false" id="mantine-Rdbtdarblu6" value="September 18, 2023"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DateInput-section"><button class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-18T13:37:39.114Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateInput-label" for="mantine-Rdbtdarblu6" id="mantine-Rdbtdarblu6-label">Date input</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-DateInput-input" data-variant="default" data-dates-input="true" autoComplete="off" placeholder="Date input" aria-invalid="false" id="mantine-Rdbtdarblu6" value="September 19, 2023"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DateInput-section"><button class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-19T18:29:41.083Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -103,7 +103,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DateInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Date input&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-DateInput-label" data-variant="default" data-size="sm" for="mantine-R1ldtdarblu6" id="mantine-R1ldtdarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-DateInput-description" data-variant="default" data-size="sm" id="mantine-R1ldtdarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-DateInput-wrapper" data-variant="default" data-size="sm"><input class="m-8fb7ebe7 mantine-Input-input mantine-DateInput-input" data-variant="default" data-dates-input="true" autoComplete="off" placeholder="Input placeholder" aria-invalid="false" aria-describedby="mantine-R1ldtdarblu6-description" id="mantine-R1ldtdarblu6" value=""/></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6qdtdarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qdtdarblu6" id="mantine-R1r6qdtdarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6qdtdarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qdtdarblu6" id="mantine-R1r6qdtdarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6qdtdarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qdtdarblu6" id="mantine-R1r6qdtdarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6qdtdarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raqdtdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Reqdtdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riqdtdarblu6" id="mantine-Riqdtdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riqdtdarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmqdtdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmqdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmqdtdarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqqdtdarblu6" id="mantine-Rqqdtdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rqqdtdarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ruqdtdarblu6" id="mantine-Ruqdtdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Ruqdtdarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -137,4 +137,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DateInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/calendar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Calendar</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-time-picker"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateTimePicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/calendar/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Calendar</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-time-picker/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateTimePicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/date-picker-input.html b/dates/date-picker-input/index.html
similarity index 76%
rename from dates/date-picker-input.html
rename to dates/date-picker-input/index.html
index 27f4a0e6bea..8af522b12ce 100644
--- a/dates/date-picker-input.html
+++ b/dates/date-picker-input/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-picker-input-5cb186eebec60a9f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatePickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Date, multiple dates and dates range picker input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatePickerInput/DatePickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> props,
-read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-picker-input-5cb186eebec60a9f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatePickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Date, multiple dates and dates range picker input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatePickerInput/DatePickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> props,
+read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" for="mantine-Rl8tdarblu6" id="mantine-Rl8tdarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rl8tdarblu6-dropdown" aria-invalid="false" id="mantine-Rl8tdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
@@ -56,8 +56,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="open-picker-in-modal" data-heading="Open picker in modal" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#open-picker-in-modal">Open picker in modal</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>.
-You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>.
+You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" for="mantine-Rlb5darblu6" id="mantine-Rlb5darblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlb5darblu6-dropdown" aria-invalid="false" id="mantine-Rlb5darblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -90,7 +90,7 @@
 <div id="clearable" data-heading="Clearable" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#clearable">Clearable</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">clearable</code> prop to display clear button in the right section. Note that if you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code>
 prop, clear button will not be displayed.</p>
-<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" aria-label="September 18, 2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">September 18, 2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DatePickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-18T13:37:39.122Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" aria-label="September 19, 2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">September 19, 2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DatePickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-19T18:29:41.088Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -117,7 +117,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatePickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DatePickerInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-DatePickerInput-label" data-variant="default" data-size="sm" data-required="true" for="mantine-R2ldtdarblu6" id="mantine-R2ldtdarblu6-label">Pick date<span class="m-78a94662 mantine-InputWrapper-required mantine-DatePickerInput-required" aria-hidden="true"> *</span></label><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-DatePickerInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DatePickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7eldtdarblu6-dropdown" aria-invalid="false" id="mantine-R2ldtdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R6qdtdarblu6" id="mantine-R6qdtdarblu6-label">Placeholder</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R6qdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raqdtdarblu6" id="mantine-Raqdtdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Raqdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Reqdtdarblu6" id="mantine-Reqdtdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Reqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riqdtdarblu6" id="mantine-Riqdtdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rmqdtdarblu6" id="mantine-Rmqdtdarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rmqdtdarblu6"><option value="default" selected="">Default</option><option value="filled">Filled</option><option value="unstyled">Unstyled</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rqqdtdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Ruqdtdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R12qdtdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R12qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R12qdtdarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R16qdtdarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R16qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R16qdtdarblu6">With asterisk</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -171,4 +171,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePickerInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-picker-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-picker-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/date-picker.html b/dates/date-picker/index.html
similarity index 92%
rename from dates/date-picker.html
rename to dates/date-picker/index.html
index b05ee18550e..f7a15028d34 100644
--- a/dates/date-picker.html
+++ b/dates/date-picker/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-picker-2840ac260c27d407.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatePicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline date, multiple dates and dates range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatePicker/DatePicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-picker-2840ac260c27d407.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatePicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline date, multiple dates and dates range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatePicker/DatePicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -15,7 +15,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">allowDeselect</code> to allow user to deselect current selected date by clicking on it.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">allowDeselect</code> is disregarded when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code> prop is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">range</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">multiple</code>. When date is
 deselected <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onChange</code> is called with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">null</code>.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -24,7 +24,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="multiple-dates" data-heading="Multiple dates" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#multiple-dates">Multiple dates</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type=&quot;multiple&quot;</code> to allow user to pick multiple dates:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -33,7 +33,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="dates-range" data-heading="Dates range" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#dates-range">Dates range</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type=&quot;range&quot;</code> to allow user to pick dates range:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -44,7 +44,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">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 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">allowSingleDateInRange</code> prop. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">allowSingleDateInRange</code> is ignored when
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">type</code> prop is not <code class="m-b183c0a2 mantine-Code-root" dir="ltr">range</code>.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -70,7 +70,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">date</code>, and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onDateChange</code> 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:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -110,7 +110,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="hide-outside-dates" data-heading="Hide outside dates" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#hide-outside-dates">Hide outside dates</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hideOutsideDates</code> prop to remove all dates that do not belong to the current month:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePicker</span> <span class="hljs-attr">hideOutsideDates</span> /&gt;</span></span>;
@@ -118,8 +118,8 @@
 <div id="first-day-of-week" data-heading="First day of week" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#first-day-of-week">First day of week</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">firstDayOfWeek</code> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider">DatesProvider</a>.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Su</th><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="27 August 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td></tr></tbody></table></div></div></div><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="26 August 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="27 August 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="2 October 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="3 October 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="4 October 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="5 October 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="6 October 2023" tabindex="-1">6</button></td></tr></tbody></table></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+for all components with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider/">DatesProvider</a>.</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Su</th><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="27 August 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td></tr></tbody></table></div></div></div><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="26 August 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="27 August 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="2 October 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="3 October 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="4 October 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="5 October 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="6 October 2023" tabindex="-1">6</button></td></tr></tbody></table></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -132,7 +132,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="hide-weekdays" data-heading="Hide weekdays" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#hide-weekdays">Hide weekdays</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hideWeekdays</code> prop to hide weekdays names:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePicker</span> <span class="hljs-attr">hideWeekdays</span> /&gt;</span></span>;
@@ -140,16 +140,16 @@
 <div id="weekend-days" data-heading="Weekend days" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#weekend-days">Weekend days</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">weekendDays</code> 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 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">[0, 6]</code> – Saturday and Sunday. You can also configure this option
-for all components with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider">DatesProvider</a>.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" data-weekend="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+for all components with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider/">DatesProvider</a>.</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" data-weekend="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePicker</span> <span class="hljs-attr">weekendDays</span>=<span class="hljs-string">{[1,</span> <span class="hljs-attr">2</span>]} /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="render-day-function" data-heading="Render day function" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#render-day-function">Render day function</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can customize day rendering with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">renderDay</code> prop. For example, it can be used to add
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/indicator">Indicator</a> to certain days.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>31</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>2</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>3</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>4</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>5</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>6</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>7</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>8</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>9</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>10</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>11</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>12</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>13</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>14</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>15</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div class="m-760d1fb1 mantine-Indicator-indicator"></div><div>16</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>17</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>18</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>19</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>20</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>21</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>22</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>23</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>24</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>25</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>26</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>27</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/indicator/">Indicator</a> to certain days.</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>31</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>2</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>3</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>4</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>5</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>6</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>7</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>8</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>9</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>10</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>11</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>12</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>13</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>14</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>15</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div class="m-760d1fb1 mantine-Indicator-indicator"></div><div>16</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>17</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>18</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>19</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>20</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>21</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>22</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>23</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>24</div></div></button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>25</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>26</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>27</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>28</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>29</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>30</div></div></button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1"><div style="--indicator-color:var(--mantine-color-red-filled);--indicator-size:calc(0.375rem * var(--mantine-scale));--indicator-top:calc(-0.3125rem * var(--mantine-scale));--indicator-right:calc(-0.3125rem * var(--mantine-scale));--indicator-translate-x:50%;--indicator-translate-y:-50%" class="m-e5262200 mantine-Indicator-root"><div>1</div></div></button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Indicator</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span>, <span class="hljs-title class_">DatePickerProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">const</span> <span class="hljs-attr">dayRenderer</span>: <span class="hljs-title class_">DatePickerProps</span>[<span class="hljs-string">&#x27;renderDay&#x27;</span>] = <span class="hljs-function">(<span class="hljs-params">date</span>) =&gt;</span> {
@@ -251,7 +251,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="number-of-columns" data-heading="Number of columns" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#number-of-columns">Number of columns</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">numberOfColumns</code> prop to define number of pickers that will be rendered side by side:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="mantine-visible-from-sm" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">October 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="1 October 2023" tabindex="0">1</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="2 October 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="3 October 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 October 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 October 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 October 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="7 October 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="8 October 2023" tabindex="-1">8</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="9 October 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="10 October 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 October 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 October 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 October 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="14 October 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="15 October 2023" tabindex="-1">15</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="16 October 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="17 October 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 October 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 October 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 October 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="21 October 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="22 October 2023" tabindex="-1">22</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="23 October 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="24 October 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 October 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 October 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 October 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="28 October 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="29 October 2023" tabindex="-1">29</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="30 October 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="31 October 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 November 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="2 November 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="3 November 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="4 November 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="5 November 2023" tabindex="-1">5</button></td></tr></tbody></table></div></div></div><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root mantine-hidden-from-sm">Demo is not available on small screens. Make your screen larger to see the demo.</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="mantine-visible-from-sm" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">October 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="1 October 2023" tabindex="0">1</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="2 October 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="3 October 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 October 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 October 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 October 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="7 October 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="8 October 2023" tabindex="-1">8</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="9 October 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="10 October 2023" tabindex="-1">10</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 October 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 October 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 October 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="14 October 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="15 October 2023" tabindex="-1">15</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="16 October 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="17 October 2023" tabindex="-1">17</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 October 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 October 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 October 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="21 October 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="22 October 2023" tabindex="-1">22</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="23 October 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="24 October 2023" tabindex="-1">24</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 October 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 October 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 October 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="28 October 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="29 October 2023" tabindex="-1">29</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="30 October 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="31 October 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="1 November 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="2 November 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="3 November 2023" tabindex="-1">3</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="4 November 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-hidden="true" data-outside="true" aria-label="5 November 2023" tabindex="-1">5</button></td></tr></tbody></table></div></div></div><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root mantine-hidden-from-sm">Demo is not available on small screens. Make your screen larger to see the demo.</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -261,7 +261,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="max-level" data-heading="Max level" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#max-level">Max level</a></h2>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><div class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" disabled="" data-static="true" tabindex="-1">September 2023</div><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><div class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" disabled="" data-static="true" tabindex="-1">September 2023</div><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -273,14 +273,14 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="size" data-heading="Size" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#size">Size</a></h2>
-<div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-size="sm" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup" data-size="sm"><div class="" data-size="sm" data-month-level="true"><div style="--dch-control-size:var(--dch-control-size-sm);--dch-fz:var(--mantine-font-size-sm)" class="m-730a79ed mantine-DatePicker-calendarHeader" data-size="sm"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month" data-size="sm"><thead class="mantine-DatePicker-monthThead"><tr style="--wr-fz:var(--mantine-font-size-sm);--wr-spacing:var(--mantine-spacing-sm)" class="mantine-DatePicker-weekdaysRow" data-size="sm"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-today="true" data-selected="true" aria-label="18 September 2023" data-autofocus="true" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rr9ctdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-size="sm" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup" data-size="sm"><div class="" data-size="sm" data-month-level="true"><div style="--dch-control-size:var(--dch-control-size-sm);--dch-fz:var(--mantine-font-size-sm)" class="m-730a79ed mantine-DatePicker-calendarHeader" data-size="sm"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month" data-size="sm"><thead class="mantine-DatePicker-monthThead"><tr style="--wr-fz:var(--mantine-font-size-sm);--wr-spacing:var(--mantine-spacing-sm)" class="mantine-DatePicker-weekdaysRow" data-size="sm"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-today="true" data-selected="true" aria-label="19 September 2023" data-autofocus="true" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button style="--day-size:var(--day-size-sm)" class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rr9ctdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePicker</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">{new</span> <span class="hljs-attr">Date</span>()} /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="change-year-and-months-controls-format" data-heading="Change year and months controls format" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-year-and-months-controls-format">Change year and months controls format</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">yearsListFormat</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">monthsListFormat</code> props to change <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://day.js.org/docs/en/display/format">dayjs format</a> of year/month controls:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 September 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 September 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">September 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">Mo</th><th class="m-18a3eca mantine-DatePicker-weekday">Tu</th><th class="m-18a3eca mantine-DatePicker-weekday">We</th><th class="m-18a3eca mantine-DatePicker-weekday">Th</th><th class="m-18a3eca mantine-DatePicker-weekday">Fr</th><th class="m-18a3eca mantine-DatePicker-weekday">Sa</th><th class="m-18a3eca mantine-DatePicker-weekday">Su</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 August 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 August 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 August 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 August 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 September 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 September 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 September 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 September 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 September 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 September 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 September 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 September 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 September 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 September 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 September 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 September 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 September 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 September 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 September 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 September 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 September 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 September 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 September 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 September 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 September 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 September 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 September 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 September 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 September 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 September 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 September 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 September 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 September 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 September 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 October 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DatePicker</span> <span class="hljs-attr">monthsListFormat</span>=<span class="hljs-string">&quot;MM&quot;</span> <span class="hljs-attr">yearsListFormat</span>=<span class="hljs-string">&quot;YY&quot;</span> /&gt;</span></span>;
@@ -304,9 +304,9 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="localization" data-heading="Localization" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#localization">Localization</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Usually it is better to specify <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code> package locale in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider">DatesProvider</a>,
+<p class="MdxTypography_paragraph__Lp7wh">Usually it is better to specify <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code> package locale in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider/">DatesProvider</a>,
 but you can also override locale per component:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">сентябрь 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">пн</th><th class="m-18a3eca mantine-DatePicker-weekday">вт</th><th class="m-18a3eca mantine-DatePicker-weekday">ср</th><th class="m-18a3eca mantine-DatePicker-weekday">чт</th><th class="m-18a3eca mantine-DatePicker-weekday">пт</th><th class="m-18a3eca mantine-DatePicker-weekday">сб</th><th class="m-18a3eca mantine-DatePicker-weekday">вс</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 августа 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 августа 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 августа 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 августа 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 сентября 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 сентября 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 сентября 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 сентября 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 сентября 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 сентября 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 сентября 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 сентября 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 сентября 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 сентября 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 сентября 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 сентября 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 сентября 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 сентября 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 сентября 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 сентября 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 сентября 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="18 сентября 2023" tabindex="0">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="19 сентября 2023" tabindex="-1">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 сентября 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 сентября 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 сентября 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 сентября 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 сентября 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 сентября 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 сентября 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 сентября 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 сентября 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 сентября 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 сентября 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 октября 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;dayjs/locale/ru&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-DatePicker-levelsGroup"><div class="" data-month-level="true"><div class="m-730a79ed mantine-DatePicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-DatePicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">сентябрь 2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-DatePicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-DatePicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-cc9820d3 mantine-DatePicker-month"><thead class="mantine-DatePicker-monthThead"><tr class="mantine-DatePicker-weekdaysRow"><th class="m-18a3eca mantine-DatePicker-weekday">пн</th><th class="m-18a3eca mantine-DatePicker-weekday">вт</th><th class="m-18a3eca mantine-DatePicker-weekday">ср</th><th class="m-18a3eca mantine-DatePicker-weekday">чт</th><th class="m-18a3eca mantine-DatePicker-weekday">пт</th><th class="m-18a3eca mantine-DatePicker-weekday">сб</th><th class="m-18a3eca mantine-DatePicker-weekday">вс</th></tr></thead><tbody class="mantine-DatePicker-monthTbody"><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="28 августа 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="29 августа 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="30 августа 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="31 августа 2023" tabindex="-1">31</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="1 сентября 2023" tabindex="-1">1</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="2 сентября 2023" tabindex="-1">2</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="3 сентября 2023" tabindex="-1">3</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="4 сентября 2023" tabindex="-1">4</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="5 сентября 2023" tabindex="-1">5</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="6 сентября 2023" tabindex="-1">6</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="7 сентября 2023" tabindex="-1">7</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="8 сентября 2023" tabindex="-1">8</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="9 сентября 2023" tabindex="-1">9</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="10 сентября 2023" tabindex="-1">10</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="11 сентября 2023" tabindex="-1">11</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="12 сентября 2023" tabindex="-1">12</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="13 сентября 2023" tabindex="-1">13</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="14 сентября 2023" tabindex="-1">14</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="15 сентября 2023" tabindex="-1">15</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="16 сентября 2023" tabindex="-1">16</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="17 сентября 2023" tabindex="-1">17</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="18 сентября 2023" tabindex="-1">18</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-today="true" aria-label="19 сентября 2023" tabindex="0">19</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="20 сентября 2023" tabindex="-1">20</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="21 сентября 2023" tabindex="-1">21</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="22 сентября 2023" tabindex="-1">22</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="23 сентября 2023" tabindex="-1">23</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="24 сентября 2023" tabindex="-1">24</button></td></tr><tr class="mantine-DatePicker-monthRow"><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="25 сентября 2023" tabindex="-1">25</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="26 сентября 2023" tabindex="-1">26</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="27 сентября 2023" tabindex="-1">27</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="28 сентября 2023" tabindex="-1">28</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="29 сентября 2023" tabindex="-1">29</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-weekend="true" aria-label="30 сентября 2023" tabindex="-1">30</button></td><td class="m-8f457cd5 mantine-DatePicker-monthCell" data-with-spacing="true"><button class="mantine-focus-auto m-396ce5cb mantine-DatePicker-day m-87cf2631 mantine-UnstyledButton-root" type="button" data-outside="true" aria-label="1 октября 2023" tabindex="-1">1</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;dayjs/locale/ru&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -354,4 +354,4 @@
 }</code></pre></div></div></div></div>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh">Note that the following events will only trigger if focus is on date control.</p>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled date</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled date</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled date in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled date in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-time-picker"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateTimePicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-picker","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled date</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled date</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled date in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled date in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-time-picker/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateTimePicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-picker","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/date-time-picker.html b/dates/date-time-picker/index.html
similarity index 73%
rename from dates/date-time-picker.html
rename to dates/date-time-picker/index.html
index 3ca07b42e28..81d017e8029 100644
--- a/dates/date-time-picker.html
+++ b/dates/date-time-picker/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-time-picker-84bab5e7092c06d1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DateTimePicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture datetime from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-time-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> props,
-read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/pages/dates/date-time-picker-84bab5e7092c06d1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DateTimePicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture datetime from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/date-time-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="datepicker-props" data-heading="DatePicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#datepicker-props">DatePicker props</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> props,
+read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-picker/">DatePicker</a> documentation to learn about all component features that are not listed on this page.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Rl8tdarblu6" id="mantine-Rl8tdarblu6-label">Pick date and time</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="Pick date and time" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rl8tdarblu6-dropdown" aria-invalid="false" id="mantine-Rl8tdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date and time</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -38,7 +38,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DateTimePicker</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Disabled&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Pick date and time&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DateTimePicker</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" data-variant="default" data-size="sm" for="mantine-R2lbddarblu6" id="mantine-R2lbddarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-DateTimePicker-description" data-variant="default" data-size="sm" id="mantine-R2lbddarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-size="sm" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="Input placeholder" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7elbddarblu6-dropdown" aria-invalid="false" aria-describedby="mantine-R2lbddarblu6-description" id="mantine-R2lbddarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Input placeholder</span></button></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R6qbddarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qbddarblu6" id="mantine-R1r6qbddarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-R1r6qbddarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qbddarblu6" id="mantine-R1r6qbddarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6qbddarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-R1r6qbddarblu6" id="mantine-R1r6qbddarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-R1r6qbddarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Raqbddarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Reqbddarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riqbddarblu6" id="mantine-Riqbddarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riqbddarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rmqbddarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rmqbddarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rmqbddarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rqqbddarblu6" id="mantine-Rqqbddarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rqqbddarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ruqbddarblu6" id="mantine-Ruqbddarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Ruqbddarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -53,7 +53,7 @@
 <div id="clearable" data-heading="Clearable" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#clearable">Clearable</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">clearable</code> prop to display clear button in the right section. Note that if you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code>
 prop, clear button will not be displayed.</p>
-<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Rlc5darblu6" id="mantine-Rlc5darblu6-label">Pick date and time</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="18/09/2023 17:37" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlc5darblu6-dropdown" aria-invalid="false" id="mantine-Rlc5darblu6">18/09/2023 17:37</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DateTimePicker-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-18T13:37:39.062Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Rlc5darblu6" id="mantine-Rlc5darblu6-label">Pick date and time</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="19/09/2023 22:29" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlc5darblu6-dropdown" aria-invalid="false" id="mantine-Rlc5darblu6">19/09/2023 22:29</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-DateTimePicker-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-19T18:29:41.086Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -66,8 +66,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="open-picker-in-modal" data-heading="Open picker in modal" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#open-picker-in-modal">Open picker in modal</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, picker is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>.
-You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">By default, picker is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>.
+You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Rlctdarblu6" id="mantine-Rlctdarblu6-label">Pick date and time</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="Pick date and time" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlctdarblu6-dropdown" aria-invalid="false" id="mantine-Rlctdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date and time</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -101,4 +101,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">DateTimePicker</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-time-picker","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DateInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/date-time-picker","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/dates-provider.html b/dates/dates-provider/index.html
similarity index 62%
rename from dates/dates-provider.html
rename to dates/dates-provider/index.html
index fce19045435..d1410130f65 100644
--- a/dates/dates-provider.html
+++ b/dates/dates-provider/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/pages/dates/dates-provider-d22e75c2fc37e763.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatesProvider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Settings provider for @mantine/dates components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatesProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatesProvider/DatesProvider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/dates-provider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/pages/dates/dates-provider-d22e75c2fc37e763.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">DatesProvider</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Settings provider for @mantine/dates components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatesProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/DatesProvider/DatesProvider.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/dates-provider.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatesProvider</code> component lets you set various settings that are shared across all
 components exported from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code> package. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DatesProvider</code> supports the following settings:</p>
 <ul class="MdxTypography_ul__pQ83b">
@@ -43,7 +43,7 @@
 the example: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">new Date(&#x27;2000-10-03 02:10:00Z&#x27;)</code>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">By effectively utilizing the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">timezone</code> parameter and the provided functions, you can tailor the presentation of date
 and time data to meet the specific requirements of your application while maintaining compatibility with various data sources.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Ran5bblu6" id="mantine-Ran5bblu6-label">Pick a Date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="02/10/2000 22:10" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtqn5bblu6-dropdown" aria-invalid="false" id="mantine-Ran5bblu6">02/10/2000 22:10</button></div></div><input type="hidden" value="2000-10-02T18:10:00.000Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatesProvider</span>, <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-DateTimePicker-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-DateTimePicker-label" for="mantine-Ran5bblu6" id="mantine-Ran5bblu6-label">Pick a Date</label><div class="m-6c018570 mantine-Input-wrapper mantine-DateTimePicker-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-DateTimePicker-input" data-variant="default" aria-label="02/10/2000 22:10" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-Rtqn5bblu6-dropdown" aria-invalid="false" id="mantine-Ran5bblu6">02/10/2000 22:10</button></div></div><input type="hidden" value="2000-10-02T17:10:00.000Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">DatesProvider</span>, <span class="hljs-title class_">DateTimePicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -51,4 +51,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">DateTimePicker</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Pick a Date&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Pick a Date&quot;</span> <span class="hljs-attr">defaultValue</span>=<span class="hljs-string">{new</span> <span class="hljs-attr">Date</span>(&#x27;<span class="hljs-attr">2000-10-03</span> <span class="hljs-attr">02:10:00Z</span>&#x27;)} /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">DatesProvider</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/getting-started"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Getting started</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/calendar"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Calendar</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/dates-provider","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/getting-started/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Getting started</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/calendar/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Calendar</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/dates-provider","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/getting-started.html b/dates/getting-started/index.html
similarity index 61%
rename from dates/getting-started.html
rename to dates/getting-started/index.html
index 77b7312b486..45d7a9abbee 100644
--- a/dates/getting-started.html
+++ b/dates/getting-started/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/getting-started-06a462ad7761843d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Getting started</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root"></p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/getting-started.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/getting-started-06a462ad7761843d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Getting started</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root"></p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/getting-started.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/dates dayjs</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/dates/styles.css&#x27;</span>;</code></pre></div></div></div></div>
@@ -28,10 +28,10 @@
 dayjs is a required dependency – you cannot change it to another date library. If you want to use a different
 date library in your application, you will need to install it separately.</p>
 <div id="custom-parse-format" data-heading="Custom parse format" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-parse-format">Custom parse format</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-input">DateInput</a> require <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://day.js.org/docs/en/plugin/custom-parse-format">custom parse format</a>
+<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/date-input/">DateInput</a> require <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://day.js.org/docs/en/plugin/custom-parse-format">custom parse format</a>
 dayjs plugin. You need to extend dayjs with this plugin before using components that require it. Note that
 it is usually done once in your application root file, so you don&#x27;t need to do it every time you use component.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> dayjs <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dayjs&#x27;</span>;
 <span class="hljs-keyword">import</span> customParseFormat <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dayjs/plugin/customParseFormat&#x27;</span>;
 
-dayjs.<span class="hljs-title function_">extend</span>(customParseFormat);</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/visually-hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">VisuallyHidden</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/dates-provider"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatesProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/getting-started","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+dayjs.<span class="hljs-title function_">extend</span>(customParseFormat);</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/visually-hidden/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">VisuallyHidden</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/dates-provider/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatesProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/getting-started","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/month-picker-input.html b/dates/month-picker-input/index.html
similarity index 76%
rename from dates/month-picker-input.html
rename to dates/month-picker-input/index.html
index 9084d2b0594..6e0bb66c51f 100644
--- a/dates/month-picker-input.html
+++ b/dates/month-picker-input/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/month-picker-input-0bec4416ffcce914.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MonthPickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Month, multiple months and months range picker input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/MonthPickerInput/MonthPickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/month-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="monthpicker-props" data-heading="MonthPicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#monthpicker-props">MonthPicker props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker">MonthPicker</a> props,
-read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker">MonthPicker</a> documentation to learn about all component features that are not listed on this page.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/month-picker-input-0bec4416ffcce914.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MonthPickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Month, multiple months and months range picker input</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/MonthPickerInput/MonthPickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/month-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="monthpicker-props" data-heading="MonthPicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#monthpicker-props">MonthPicker props</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker/">MonthPicker</a> props,
+read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker/">MonthPicker</a> documentation to learn about all component features that are not listed on this page.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MonthPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MonthPickerInput-label" for="mantine-Rl8tdarblu6" id="mantine-Rl8tdarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-MonthPickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-MonthPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rl8tdarblu6-dropdown" aria-invalid="false" id="mantine-Rl8tdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
@@ -56,8 +56,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="open-picker-in-modal" data-heading="Open picker in modal" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#open-picker-in-modal">Open picker in modal</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker">MonthPicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>.
-You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/month-picker/">MonthPicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>.
+You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MonthPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MonthPickerInput-label" for="mantine-Rlb5darblu6" id="mantine-Rlb5darblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-MonthPickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-MonthPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlb5darblu6-dropdown" aria-invalid="false" id="mantine-Rlb5darblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -90,7 +90,7 @@
 <div id="clearable" data-heading="Clearable" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#clearable">Clearable</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">clearable</code> prop to display clear button in the right section. Note that if you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code>
 prop, clear button will not be displayed.</p>
-<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MonthPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MonthPickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-MonthPickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-MonthPickerInput-input" data-variant="default" aria-label="September 2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">September 2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MonthPickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-18T13:37:39.134Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MonthPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MonthPickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-MonthPickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-MonthPickerInput-input" data-variant="default" aria-label="September 2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">September 2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MonthPickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-19T18:29:41.709Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -117,7 +117,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-MonthPickerInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-MonthPickerInput-label" data-variant="default" data-size="sm" data-required="true" for="mantine-R2ldtdarblu6" id="mantine-R2ldtdarblu6-label">Pick date<span class="m-78a94662 mantine-InputWrapper-required mantine-MonthPickerInput-required" aria-hidden="true"> *</span></label><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-MonthPickerInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-MonthPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7eldtdarblu6-dropdown" aria-invalid="false" id="mantine-R2ldtdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R6qdtdarblu6" id="mantine-R6qdtdarblu6-label">Placeholder</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R6qdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raqdtdarblu6" id="mantine-Raqdtdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Raqdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Reqdtdarblu6" id="mantine-Reqdtdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Reqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riqdtdarblu6" id="mantine-Riqdtdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rmqdtdarblu6" id="mantine-Rmqdtdarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rmqdtdarblu6"><option value="default" selected="">Default</option><option value="filled">Filled</option><option value="unstyled">Unstyled</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rqqdtdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Ruqdtdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R12qdtdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R12qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R12qdtdarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R16qdtdarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R16qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R16qdtdarblu6">With asterisk</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -171,4 +171,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MonthPickerInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/month-picker-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPicker</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/month-picker-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/month-picker.html b/dates/month-picker/index.html
similarity index 87%
rename from dates/month-picker.html
rename to dates/month-picker/index.html
index 6ec29b4d37a..94e6aa0aaaf 100644
--- a/dates/month-picker.html
+++ b/dates/month-picker/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/month-picker-d4bfdf5e6439984a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MonthPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline month, multiple months and months range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/MonthPicker/MonthPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/month-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/month-picker-d4bfdf5e6439984a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">MonthPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline month, multiple months and months range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/MonthPicker/MonthPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/month-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-MonthPicker-levelsGroup"><div class="" data-year-level="true"><div class="m-730a79ed mantine-MonthPicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-MonthPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-MonthPicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-MonthPicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-MonthPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-MonthPicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-2a6c32d mantine-MonthPicker-monthsList"><tbody><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Jan</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Feb</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Mar</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Apr</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">May</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Jun</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Jul</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Aug</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="0">Sep</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Oct</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Nov</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">Dec</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -213,7 +213,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="localization" data-heading="Localization" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#localization">Localization</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Usually it is better to specify <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code> package locale in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider">DatesProvider</a>,
+<p class="MdxTypography_paragraph__Lp7wh">Usually it is better to specify <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code> package locale in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/dates-provider/">DatesProvider</a>,
 but you can also override locale per component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-MonthPicker-levelsGroup"><div class="" data-year-level="true"><div class="m-730a79ed mantine-MonthPicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-MonthPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-MonthPicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-f6645d97 mantine-MonthPicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0">2023</button><button class="mantine-focus-auto m-2351eeb0 mantine-MonthPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-MonthPicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-2a6c32d mantine-MonthPicker-monthsList"><tbody><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">янв.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">февр.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">март</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">апр.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">май</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">июнь</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">июль</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">авг.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="0">сент.</button></td></tr><tr class="mantine-MonthPicker-monthsListRow"><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">окт.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">нояб.</button></td><td class="m-fe27622f mantine-MonthPicker-monthsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-MonthPicker-monthsListControl m-dc6a3c71 mantine-MonthPicker-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">дек.</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;dayjs/locale/ru&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MonthPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
@@ -257,4 +257,4 @@
 }</code></pre></div></div></div></div>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh">Note that the following events will only trigger if focus is on month control.</p>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled month</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled month</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled month in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled month in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/month-picker","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled month</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled month</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled month in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled month in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/date-picker-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">DatePickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/month-picker","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/time-input.html b/dates/time-input/index.html
similarity index 70%
rename from dates/time-input.html
rename to dates/time-input/index.html
index c47ceffad3a..2f83f512e53 100644
--- a/dates/time-input.html
+++ b/dates/time-input/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/dates/time-input-680f95fb443f945b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TimeInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture time from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TimeInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/TimeInput/TimeInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/time-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TimeInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TimeInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/dates/time-input-680f95fb443f945b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">TimeInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture time from the user</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TimeInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/TimeInput/TimeInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/time-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">TimeInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">input</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TimeInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(21.25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TimeInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-TimeInput-label" data-variant="default" data-size="sm" for="mantine-Rakldarblu6" id="mantine-Rakldarblu6-label">Input label</label><p style="--input-description-size:calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))" class="m-fe47ce59 mantine-InputWrapper-description mantine-TimeInput-description" data-variant="default" data-size="sm" id="mantine-Rakldarblu6-description">Input description</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2);--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-TimeInput-wrapper" data-variant="default" data-size="sm"><input class="m-468e7eda m-8fb7ebe7 mantine-Input-input mantine-TimeInput-input" data-variant="default" placeholder="Input placeholder" step="60" type="time" aria-invalid="false" aria-describedby="mantine-Rakldarblu6-description" id="mantine-Rakldarblu6"/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="segmented"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R3d4ldarblu6-label">Variant</div><div style="--sc-shadow:var(--mantine-shadow-xs);--sc-transition-duration:150ms" class="m-cf365364 mantine-SegmentedControl-root" data-full-width="true" role="radiogroup"><span style="--sc-indicator-width:0px;--sc-indicator-height:0px;--sc-indicator-transform:translate(0px, 0px)" class="m-9e182ccd mantine-SegmentedControl-indicator"></span><div class="m-69686b9b mantine-SegmentedControl-control" data-active="true"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-default" data-focus-ring="auto" checked="" value="default"/><label class="m-1738fcb2 mantine-SegmentedControl-label" data-active="true" for="mantine-Rtjd4ldarblu6-default">Default</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-filled" data-focus-ring="auto" value="filled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-filled">Filled</label></div><div class="m-69686b9b mantine-SegmentedControl-control"><input class="m-1714d588 mantine-SegmentedControl-input" type="radio" name="mantine-Rtjd4ldarblu6" id="mantine-Rtjd4ldarblu6-unstyled" data-focus-ring="auto" value="unstyled"/><label class="m-1738fcb2 mantine-SegmentedControl-label" for="mantine-Rtjd4ldarblu6-unstyled">Unstyled</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R5d4ldarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-R7d4ldarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R9d4ldarblu6" id="mantine-R9d4ldarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R9d4ldarblu6" value="Input label"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-Rbd4ldarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-Rbd4ldarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-Rbd4ldarblu6">With asterisk</label></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rdd4ldarblu6" id="mantine-Rdd4ldarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rdd4ldarblu6" value="Input description"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rfd4ldarblu6" id="mantine-Rfd4ldarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Rfd4ldarblu6" value=""/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TimeInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -82,4 +82,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">TimeInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/code-highlight"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CodeHighlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/time-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/code-highlight/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CodeHighlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/time-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/year-picker-input.html b/dates/year-picker-input/index.html
similarity index 76%
rename from dates/year-picker-input.html
rename to dates/year-picker-input/index.html
index bb1efb5135e..b0154f01c8c 100644
--- a/dates/year-picker-input.html
+++ b/dates/year-picker-input/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/year-picker-input-7dd09d975f18370a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">YearPickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline year, multiple years and years range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/YearPickerInput/YearPickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/year-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="yearpicker-props" data-heading="YearPicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#yearpicker-props">YearPicker props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">YearPickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker">YearPicker</a> props,
-read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker">YearPicker</a> documentation to learn about all component features that are not listed on this page.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1080-f9995edff1a2d0ca.js" defer=""></script><script src="/_next/static/chunks/pages/dates/year-picker-input-7dd09d975f18370a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">YearPickerInput</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline year, multiple years and years range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/YearPickerInput/YearPickerInput.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/year-picker-input.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="yearpicker-props" data-heading="YearPicker props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#yearpicker-props">YearPicker props</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">YearPickerInput</code> supports most of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker/">YearPicker</a> props,
+read through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker/">YearPicker</a> documentation to learn about all component features that are not listed on this page.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-YearPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-YearPickerInput-label" for="mantine-Rl8tdarblu6" id="mantine-Rl8tdarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-YearPickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-YearPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rl8tdarblu6-dropdown" aria-invalid="false" id="mantine-Rl8tdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
@@ -56,8 +56,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="open-picker-in-modal" data-heading="Open picker in modal" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#open-picker-in-modal">Open picker in modal</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker">YearPicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a>.
-You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">By default, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/dates/year-picker/">YearPicker</a> is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a>.
+You can change that to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dropdownType=&quot;modal&quot;</code>:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-YearPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-YearPickerInput-label" for="mantine-Rlb5darblu6" id="mantine-Rlb5darblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-YearPickerInput-wrapper" data-variant="default" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-YearPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlb5darblu6-dropdown" aria-invalid="false" id="mantine-Rlb5darblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -85,7 +85,7 @@
 <div id="clearable" data-heading="Clearable" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#clearable">Clearable</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">clearable</code> prop to display clear button in the right section. Note that if you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rightSection</code>
 prop, clear button will not be displayed.</p>
-<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-YearPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-YearPickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-YearPickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-YearPickerInput-input" data-variant="default" aria-label="2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-YearPickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-18T13:37:39.212Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
+<div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-YearPickerInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-YearPickerInput-label" for="mantine-Rlcldarblu6" id="mantine-Rlcldarblu6-label">Pick date</label><div class="m-6c018570 mantine-Input-wrapper mantine-YearPickerInput-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-YearPickerInput-input" data-variant="default" aria-label="2023" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R1rlcldarblu6-dropdown" aria-invalid="false" id="mantine-Rlcldarblu6">2023</button><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-YearPickerInput-section"><button style="--cb-size:var(--cb-size-sm)" class="mantine-focus-auto mantine-active m-86a44da5 mantine-CloseButton-root m-87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--cb-icon-size, 70%);height:var(--cb-icon-size, 70%)"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><input type="hidden" value="2023-09-19T18:29:41.154Z"/></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -112,7 +112,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="input-props" data-heading="Input props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#input-props">Input props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> documentation to learn about all available features.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> component supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> <!-- -->and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input.Wrapper</a> components features and all<!-- --> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> element props. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MonthPickerInput</code> documentation does not include all features supported by the component – see<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> documentation to learn about all available features.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div style="--demo-flex:1;--demo-max-width:calc(25rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-YearPickerInput-root" data-variant="default" data-size="sm"><label style="--input-label-size:var(--mantine-font-size-sm)" class="m-8fdc1311 mantine-InputWrapper-label mantine-YearPickerInput-label" data-variant="default" data-size="sm" data-required="true" for="mantine-R2ldtdarblu6" id="mantine-R2ldtdarblu6-label">Pick date<span class="m-78a94662 mantine-InputWrapper-required mantine-YearPickerInput-required" aria-hidden="true"> *</span></label><div style="--input-height:var(--input-height-sm);--input-fz:var(--mantine-font-size-sm);--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-YearPickerInput-wrapper" data-variant="default" data-size="sm" data-multiline="true"><button class="m-6fa5e2aa m-8fb7ebe7 mantine-Input-input mantine-YearPickerInput-input" data-variant="default" aria-label="Pick date" data-dates-input="true" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-R7eldtdarblu6-dropdown" aria-invalid="false" id="mantine-R2ldtdarblu6"><span class="m-88bacfd0 mantine-InputPlaceholder-placeholder">Pick date</span></button></div></div><input type="hidden" value=""/></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R6qdtdarblu6" id="mantine-R6qdtdarblu6-label">Placeholder</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-R6qdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raqdtdarblu6" id="mantine-Raqdtdarblu6-label">Label</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Raqdtdarblu6" value="Pick date"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Reqdtdarblu6" id="mantine-Reqdtdarblu6-label">Description</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Reqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Riqdtdarblu6" id="mantine-Riqdtdarblu6-label">Error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter prop value" type="string" aria-invalid="false" id="mantine-Riqdtdarblu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-Rmqdtdarblu6" id="mantine-Rmqdtdarblu6-label">Variant</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" placeholder="Enter prop value" type="select" aria-invalid="false" id="mantine-Rmqdtdarblu6"><option value="default" selected="">Default</option><option value="filled">Filled</option><option value="unstyled">Unstyled</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rqqdtdarblu6-label">Radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Ruqdtdarblu6-label">Size</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R12qdtdarblu6" class="m-926b4011 mantine-Switch-input"/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R12qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R12qdtdarblu6">Disabled</label></div></div></div><div class="m-5f93f3bb mantine-Switch-root m-5f75b09e mantine-Switch-root" data-label-position="right"><div class="m-5f6e695e mantine-Switch-body"><input type="checkbox" id="mantine-R16qdtdarblu6" class="m-926b4011 mantine-Switch-input" checked=""/><label class="m-9307d992 mantine-Switch-track" data-label-position="right" for="mantine-R16qdtdarblu6"><span class="m-93039a1d mantine-Switch-thumb" data-reduce-motion="true"></span><span class="m-8277e082 mantine-Switch-trackLabel"></span></label><div class="m-d3ea56bb mantine-Switch-labelWrapper"><label class="m-8ee546b8 mantine-Switch-label" for="mantine-R16qdtdarblu6">With asterisk</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPickerInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -166,4 +166,4 @@
 <span class="hljs-comment">// Accessible input – it has associated label element</span>
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">YearPickerInput</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;My input&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/time-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TimeInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/year-picker-input","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPicker</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/time-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TimeInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/year-picker-input","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/dates/year-picker.html b/dates/year-picker/index.html
similarity index 85%
rename from dates/year-picker.html
rename to dates/year-picker/index.html
index 58c377c8543..295ddba1470 100644
--- a/dates/year-picker.html
+++ b/dates/year-picker/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/year-picker-ab25c5daa2c424c0.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/year-picker">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">YearPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline year, multiple years and years range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/YearPicker/YearPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/year-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1035-2078d70242b9f415.js" defer=""></script><script src="/_next/static/chunks/pages/dates/year-picker-ab25c5daa2c424c0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/getting-started/">Getting started</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/dates-provider/">DatesProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/calendar/">Calendar</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-input/">DateInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-time-picker/">DateTimePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker/">DatePicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/date-picker-input/">DatePickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker/">MonthPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/month-picker-input/">MonthPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/dates/year-picker/">YearPicker</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/year-picker-input/">YearPickerInput</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/dates/time-input/">TimeInput</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">YearPicker</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Inline year, multiple years and years range picker</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dates/src/components/YearPicker/YearPicker.tsx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/dates/year-picker.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dates"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dates</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="" data-calendar="true"><div class="m-30b26e33 mantine-YearPicker-levelsGroup"><div class="" data-decade-level="true"><div class="m-730a79ed mantine-YearPicker-calendarHeader"><button class="mantine-focus-auto m-2351eeb0 mantine-YearPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="previous" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-YearPicker-calendarHeaderControlIcon" data-direction="previous"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><div class="mantine-focus-auto m-f6645d97 mantine-YearPicker-calendarHeaderLevel m-87cf2631 mantine-UnstyledButton-root" disabled="" data-static="true" tabindex="-1">2020 – 2029</div><button class="mantine-focus-auto m-2351eeb0 mantine-YearPicker-calendarHeaderControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-direction="next" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:45%;height:45%;display:block" class="m-367dc749 mantine-YearPicker-calendarHeaderControlIcon" data-direction="next"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><table class="m-9206547b mantine-YearPicker-yearsList"><tbody><tr class="mantine-YearPicker-yearsListRow"><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2020</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2021</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2022</button></td></tr><tr class="mantine-YearPicker-yearsListRow"><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="0">2023</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2024</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2025</button></td></tr><tr class="mantine-YearPicker-yearsListRow"><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2026</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2027</button></td><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2028</button></td></tr><tr class="mantine-YearPicker-yearsListRow"><td class="m-c5a19c7d mantine-YearPicker-yearsListCell" data-with-spacing="true"><button class="mantine-focus-auto mantine-YearPicker-yearsListControl m-dc6a3c71 mantine-PickerControl-pickerControl m-87cf2631 mantine-UnstyledButton-root" type="button" data-picker-control="true" tabindex="-1">2029</button></td></tr></tbody></table></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">YearPicker</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dates&#x27;</span>;
 
@@ -205,4 +205,4 @@
 }</code></pre></div></div></div></div>
 <div id="keyboard-interactions" data-heading="Keyboard interactions" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-interactions">Keyboard interactions</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh">Note that the following events will only trigger if focus is on year control.</p>
-<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled year</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled year</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled year in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled year in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker-input"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/year-picker","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div style="overflow-x:auto"><div style="min-width:calc(31.25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:var(--mantine-spacing-md)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Key</td><td class="m-4e7aa4ef mantine-Table-td">Description</td></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowRight</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled year</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowLeft</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled year</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowDown</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses next non-disabled year in the same column</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><kbd class="m-dc6f14e2 mantine-Kbd-root">ArrowUp</kbd></td><td class="m-4e7aa4ef mantine-Table-td">Focuses previous non-disabled year in the same column</td></tr></tbody></table></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/month-picker-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MonthPickerInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/year-picker-input/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">YearPickerInput</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/dates/year-picker","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/create-form-context.html b/form/create-form-context/index.html
similarity index 61%
rename from form/create-form-context.html
rename to form/create-form-context/index.html
index 26049e3973c..13f1c6659fc 100644
--- a/form/create-form-context.html
+++ b/form/create-form-context/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/form/create-form-context-7c64b8d3a043b263.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form context</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Add context support to use-form with createFormContext</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/use-form.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/form/create-form-context-7c64b8d3a043b263.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form context</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Add context support to use-form with createFormContext</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/use-form.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createFormContext</code> function creates context provider and hook to get form object from context:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { createFormContext } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -86,4 +86,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">UserFormProvider</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/status"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Touched &amp; dirty</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/recipes"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Recipes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/create-form-context","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/status/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Touched &amp; dirty</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/recipes/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Recipes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/create-form-context","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/errors.html b/form/errors/index.html
similarity index 66%
rename from form/errors.html
rename to form/errors/index.html
index 4ae3817539a..836670ac2cc 100644
--- a/form/errors.html
+++ b/form/errors/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/form/errors-9fa5beb0bc21f923.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form errors</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manipulate form errors with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/errors.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="errors-object" data-heading="Errors object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#errors-object">Errors object</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/form/errors-9fa5beb0bc21f923.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form errors</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manipulate form errors with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/errors.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="errors-object" data-heading="Errors object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#errors-object">Errors object</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">form.errors</code> is an object of React nodes that contains validation errors:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
@@ -28,7 +28,7 @@
 <span class="hljs-comment">//   lastName: &#x27;Last name is too short&#x27;</span>
 <span class="hljs-comment">// }</span></code></pre></div></div></div></div>
 <div id="initial-errors" data-heading="Initial errors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-errors">Initial errors</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Same as with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values">initial values</a> you can set initial form errors:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Same as with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values/">initial values</a> you can set initial form errors:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
 <span class="hljs-keyword">const</span> form = <span class="hljs-title function_">useForm</span>({
@@ -96,4 +96,4 @@
 
 <span class="hljs-keyword">const</span> form = <span class="hljs-title function_">useForm</span>();
 
-<span class="hljs-keyword">const</span> <span class="hljs-title function_">handleErrors</span> = (<span class="hljs-params">errors: <span class="hljs-keyword">typeof</span> form.errors</span>) =&gt; {};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/values"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form values</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validation"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validation</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/errors","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-keyword">const</span> <span class="hljs-title function_">handleErrors</span> = (<span class="hljs-params">errors: <span class="hljs-keyword">typeof</span> form.errors</span>) =&gt; {};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/values/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form values</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validation/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validation</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/errors","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/nested.html b/form/nested/index.html
similarity index 71%
rename from form/nested.html
rename to form/nested/index.html
index 73ccffdeaab..dfe5b56318e 100644
--- a/form/nested.html
+++ b/form/nested/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/nested-a27914bb9f6d9ba5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Nested fields</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage nested arrays and object state with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/nested.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="properties-paths" data-heading="Properties paths" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#properties-paths">Properties paths</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/nested-a27914bb9f6d9ba5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Nested fields</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage nested arrays and object state with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/nested.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="properties-paths" data-heading="Properties paths" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#properties-paths">Properties paths</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">form</code> handlers accept property path as the first argument.
 Property path includes keys/indices of objects/arrays at which target property is contained:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
@@ -130,7 +130,7 @@
     {
       &quot;name&quot;: &quot;&quot;,
       &quot;active&quot;: false,
-      &quot;key&quot;: &quot;mantine-57tkpn0nq&quot;
+      &quot;key&quot;: &quot;mantine-cswvhnwp4&quot;
     }
   ]
 }</pre></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
@@ -234,4 +234,4 @@
 <span class="hljs-comment">// {</span>
 <span class="hljs-comment">//  &#x27;users.0.age&#x27;: &#x27;User must be 18 or older&#x27;,</span>
 <span class="hljs-comment">//  &#x27;users.1.name&#x27;: &#x27;Name should have at least 2 letters&#x27;</span>
-<span class="hljs-comment">// }</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validators"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validators</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/status"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Touched &amp; dirty</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/nested","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-comment">// }</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validators/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validators</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/status/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Touched &amp; dirty</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/nested","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/recipes.html b/form/recipes/index.html
similarity index 77%
rename from form/recipes.html
rename to form/recipes/index.html
index 95ebce60a2e..884018665c5 100644
--- a/form/recipes.html
+++ b/form/recipes/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/3c425cc6-dcff8cac03b5558f.js" defer=""></script><script src="/_next/static/chunks/1531-11d35445c5475ac1.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/recipes-f5cf776e291626cf.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Recipes</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">use-form examples</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/recipes.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="set-initial-values-with-async-request" data-heading="Set initial values with async request" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-initial-values-with-async-request">Set initial values with async request</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/3c425cc6-dcff8cac03b5558f.js" defer=""></script><script src="/_next/static/chunks/1531-11d35445c5475ac1.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/recipes-f5cf776e291626cf.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Recipes</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">use-form examples</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/recipes.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="set-initial-values-with-async-request" data-heading="Set initial values with async request" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-initial-values-with-async-request">Set initial values with async request</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(21.25rem * var(--mantine-scale))" class=""><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rradbblu6" id="mantine-Rradbblu6-label">Email</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Email" aria-invalid="false" id="mantine-Rradbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-sm)" class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R1badbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"><label class="m-8ee546b8 mantine-Checkbox-label" for="mantine-R1badbblu6">I accept terms and conditions</label></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Checkbox</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -260,4 +260,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/create-form-context"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form context</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/app-shell"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AppShell</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/recipes","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/create-form-context/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form context</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/core/app-shell/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">AppShell</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/recipes","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/status.html b/form/status/index.html
similarity index 65%
rename from form/status.html
rename to form/status/index.html
index 167941735fa..6771df3ee04 100644
--- a/form/status.html
+++ b/form/status/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/status-4f09aec8dc1b7727.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Touched &amp; dirty</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Get fields and form touched and dirty status</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/status.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="touched-and-dirty-state" data-heading="Touched and dirty state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#touched-and-dirty-state">Touched and dirty state</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/status-4f09aec8dc1b7727.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Touched &amp; dirty</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Get fields and form touched and dirty status</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/status.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="touched-and-dirty-state" data-heading="Touched and dirty state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#touched-and-dirty-state">Touched and dirty state</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">form.isTouched</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">form.isDirty</code> fields provide information about current field status:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">Field is considered to be <code class="m-b183c0a2 mantine-Code-root" dir="ltr">touched</code> when user focused it or its value was changed programmatically with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">form.setFieldValue</code> handler</li>
@@ -55,7 +55,7 @@
 form.<span class="hljs-title function_">isDirty</span>(); <span class="hljs-comment">// -&gt; was any field in form modified?</span></code></pre></div></div></div></div>
 <div id="initial-values" data-heading="Initial values" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-values">Initial values</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can provide initial touched and dirty values with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">initialTouched</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">initialDirty</code> properties.
-Both properties support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/errors">the same fields path format as errors</a>:</p>
+Both properties support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/errors/">the same fields path format as errors</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
 <span class="hljs-keyword">const</span> form = <span class="hljs-title function_">useForm</span>({
@@ -96,4 +96,4 @@
 form.<span class="hljs-title function_">isDirty</span>(); <span class="hljs-comment">// -&gt; false</span>
 
 form.<span class="hljs-title function_">setValues</span>({ <span class="hljs-attr">a</span>: <span class="hljs-number">3</span> });
-form.<span class="hljs-title function_">isDirty</span>(); <span class="hljs-comment">// -&gt; true</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/nested"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Nested fields</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/create-form-context"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form context</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/status","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+form.<span class="hljs-title function_">isDirty</span>(); <span class="hljs-comment">// -&gt; true</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/nested/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Nested fields</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/create-form-context/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form context</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/status","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/use-form.html b/form/use-form/index.html
similarity index 72%
rename from form/use-form.html
rename to form/use-form/index.html
index 9c60d27d81e..c071f87a5de 100644
--- a/form/use-form.html
+++ b/form/use-form/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/use-form-a5f21be50ed46448.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-form</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage form state</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-form/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/use-form.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/use-form-a5f21be50ed46448.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-form</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage form state</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-form/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/use-form.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code> package does not depend on any other libraries, you can use it with or without <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> inputs:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/form</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
@@ -65,7 +65,7 @@
   },
 });</code></pre></div></div></div></div>
 <div id="values" data-heading="Values" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#values">Values</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values">Form values guide</a></p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values/">Form values guide</a></p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// get current form values</span>
 form.<span class="hljs-property">values</span>;
 
@@ -86,7 +86,7 @@
 <span class="hljs-comment">// resets touched and dirty state</span>
 form.<span class="hljs-title function_">reset</span>();</code></pre></div></div></div></div>
 <div id="list-items" data-heading="List items" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#list-items">List items</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/nested">Nested fields guide</a></p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/nested/">Nested fields guide</a></p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Inserts given list item at the specified path</span>
 form.<span class="hljs-title function_">insertListItem</span>(<span class="hljs-string">&#x27;fruits&#x27;</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Apple&#x27;</span>, <span class="hljs-attr">available</span>: <span class="hljs-literal">true</span> });
 
@@ -102,7 +102,7 @@
 <span class="hljs-comment">// You should make sure that there are elements at at the `from` and `to` index.</span>
 form.<span class="hljs-title function_">reorderListItem</span>(<span class="hljs-string">&#x27;fruits&#x27;</span>, { <span class="hljs-attr">from</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">to</span>: <span class="hljs-number">0</span> });</code></pre></div></div></div></div>
 <div id="validation" data-heading="Validation" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#validation">Validation</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation">Form validation guide</a></p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation/">Form validation guide</a></p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
 <span class="hljs-keyword">const</span> form = <span class="hljs-title function_">useForm</span>({
@@ -131,7 +131,7 @@
 form.<span class="hljs-title function_">isValid</span>();
 form.<span class="hljs-title function_">isValid</span>(<span class="hljs-string">&#x27;user.firstName&#x27;</span>);</code></pre></div></div></div></div>
 <div id="errors" data-heading="Errors" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#errors">Errors</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/errors">Form errors guide</a></p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/errors/">Form errors guide</a></p>
 <p class="MdxTypography_paragraph__Lp7wh">Validation errors occur when defined validation rules were violated, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">initialErrors</code> were specified in useForm properties
 or validation errors were set manually.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// get current errors state</span>
@@ -158,7 +158,7 @@
 )}&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></span>
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">onReset</span>=<span class="hljs-string">{form.onReset}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></span></code></pre></div></div></div></div>
 <div id="touched-and-dirty" data-heading="Touched and dirty" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#touched-and-dirty">Touched and dirty</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/status">Touched &amp; dirty guide</a></p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/status/">Touched &amp; dirty guide</a></p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Returns true if user interacted with any field inside form in any way</span>
 form.<span class="hljs-title function_">isTouched</span>();
 
@@ -222,4 +222,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">OccupationInput</span> <span class="hljs-attr">form</span>=<span class="hljs-string">{form}</span> /&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-shallow-effect"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-shallow-effect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/values"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form values</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/use-form","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-shallow-effect/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-shallow-effect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/values/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form values</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/use-form","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/validation.html b/form/validation/index.html
similarity index 88%
rename from form/validation.html
rename to form/validation/index.html
index be8b9fe7375..86358443c0d 100644
--- a/form/validation.html
+++ b/form/validation/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/5060-7540dfb08e46808c.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/validation-99f0e1ec19e372aa.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form validation</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Validate fields with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/validation.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="validation-with-rules-object" data-heading="Validation with rules object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#validation-with-rules-object">Validation with rules object</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/5060-7540dfb08e46808c.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/validation-99f0e1ec19e372aa.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form validation</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Validate fields with use-form hook</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/validation.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="validation-with-rules-object" data-heading="Validation with rules object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#validation-with-rules-object">Validation with rules object</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">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:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(21.25rem * var(--mantine-scale))" class=""><form><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R6qglbblu6" id="mantine-R6qglbblu6-label">Name</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Name" aria-invalid="false" id="mantine-R6qglbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raqglbblu6" id="mantine-Raqglbblu6-label">Email</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Email" aria-invalid="false" id="mantine-Raqglbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-NumberInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" for="mantine-Reqglbblu6" id="mantine-Reqglbblu6-label">Age</label><div class="m-6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Age" aria-invalid="false" id="mantine-Reqglbblu6" type="text" value="0"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m-95e17d22 mantine-NumberInput-controls"><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true" disabled=""><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><button style="margin-top:var(--mantine-spacing-sm)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="submit"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Submit</span></span></button></form></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
@@ -655,4 +655,4 @@
 form.<span class="hljs-title function_">isValid</span>(); <span class="hljs-comment">// -&gt; false</span>
 
 <span class="hljs-comment">// get validation status of field</span>
-form.<span class="hljs-title function_">isValid</span>(<span class="hljs-string">&#x27;name&#x27;</span>); <span class="hljs-comment">// -&gt; false</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/errors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form errors</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validators"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validators</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/validation","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+form.<span class="hljs-title function_">isValid</span>(<span class="hljs-string">&#x27;name&#x27;</span>); <span class="hljs-comment">// -&gt; false</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/errors/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form errors</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validators/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validators</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/validation","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/validators.html b/form/validators/index.html
similarity index 74%
rename from form/validators.html
rename to form/validators/index.html
index e68cb99f78e..bbeee2a743a 100644
--- a/form/validators.html
+++ b/form/validators/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/validators-26a2fbd77eb58593.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form validators</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Premade validation functions</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/validators.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code> package exports several functions that can be used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation#validation-with-rules-object">validation rules object</a>.
-Validation functions are tiny in size and provide basic validation, if you have complex validation requirements, use other types of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation">validation</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/4136-6fb5e5d743480d39.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/validators-26a2fbd77eb58593.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form validators</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Premade validation functions</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/validators.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code> package exports several functions that can be used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation/#validation-with-rules-object">validation rules object</a>.
+Validation functions are tiny in size and provide basic validation, if you have complex validation requirements, use other types of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/validation/">validation</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><form style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R3d8lbblu6" id="mantine-R3d8lbblu6-label">Name<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Name" aria-invalid="false" id="mantine-R3d8lbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R5d8lbblu6" id="mantine-R5d8lbblu6-label">Your job<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your job" aria-invalid="false" id="mantine-R5d8lbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R7d8lbblu6" id="mantine-R7d8lbblu6-label">Your email<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your email" aria-invalid="false" id="mantine-R7d8lbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R9d8lbblu6" id="mantine-R9d8lbblu6-label">Your favorite color<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Your favorite color" aria-invalid="false" id="mantine-R9d8lbblu6" value=""/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-NumberInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label" data-required="true" for="mantine-Rbd8lbblu6" id="mantine-Rbd8lbblu6-label">Your age<span class="m-78a94662 mantine-InputWrapper-required mantine-NumberInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-NumberInput-input" data-variant="default" placeholder="Your age" aria-invalid="false" id="mantine-Rbd8lbblu6" type="text" value="18"/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NumberInput-section"><div class="m-95e17d22 mantine-NumberInput-controls"><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="up" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size);transform:rotate(180deg)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-80b4b171 mantine-NumberInput-control m-87cf2631 mantine-UnstyledButton-root" data-direction="down" type="button" tabindex="-1" aria-hidden="true"><svg style="width:var(--ni-chevron-size);height:var(--ni-chevron-size)" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div style="--group-justify:flex-end;margin-top:var(--mantine-spacing-md)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="submit"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Submit</span></span></button></div></form></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">NumberInput</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -234,4 +234,4 @@
   <span class="hljs-attr">validate</span>: {
     <span class="hljs-attr">confirmPassword</span>: <span class="hljs-title function_">matchesField</span>(<span class="hljs-string">&#x27;password&#x27;</span>, <span class="hljs-string">&#x27;Passwords are not the same&#x27;</span>),
   },
-});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validation"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validation</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/nested"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Nested fields</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/validators","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/validation/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form validation</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/nested/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Nested fields</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/validators","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/form/values.html b/form/values/index.html
similarity index 76%
rename from form/values.html
rename to form/values/index.html
index b07a0ed1abd..826284981f2 100644
--- a/form/values.html
+++ b/form/values/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/values-5b67f1ee8f01ba0e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/values">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form values</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manipulate form values with use-form</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/values.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="initial-values" data-heading="Initial values" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-values">Initial values</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/pages/form/values-5b67f1ee8f01ba0e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/use-form/">use-form</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/form/values/">Form values</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/errors/">Form errors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validation/">Form validation</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/validators/">Form validators</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/nested/">Nested fields</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/status/">Touched &amp; dirty</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/create-form-context/">Form context</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/form/recipes/">Recipes</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Form values</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manipulate form values with use-form</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/form/values.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/form"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/form</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="initial-values" data-heading="Initial values" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#initial-values">Initial values</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">In most cases you should set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">initialValues</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
@@ -207,7 +207,7 @@
   <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleSubmit</span> = (<span class="hljs-params">values: FormValues</span>) =&gt; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(values);
 }</code></pre></div></div></div></div>
 <div id="get-transformed-values-type" data-heading="Get transformed values type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-transformed-values-type">Get transformed values type</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To get transformed values (output of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values#transformvalues">transformValues</a>) use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TransformedValues</code> type.
+<p class="MdxTypography_paragraph__Lp7wh">To get transformed values (output of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/form/values/#transformvalues">transformValues</a>) use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">TransformedValues</code> type.
 It is useful when you want to create a custom submit function:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useForm, <span class="hljs-title class_">TransformedValues</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/form&#x27;</span>;
 
@@ -260,4 +260,4 @@
       <span class="hljs-attr">jobs</span>: [],
     },
   });
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/use-form"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-form</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/errors"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form errors</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/values","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/use-form/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-form</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/errors/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Form errors</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/form/values","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/getting-started.html b/getting-started/index.html
similarity index 83%
rename from getting-started.html
rename to getting-started/index.html
index c1ebb66daa1..eab6508cb9b 100644
--- a/getting-started.html
+++ b/getting-started/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/7eac7ac93049bfac.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7eac7ac93049bfac.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/getting-started-d599a58b1b2d57e5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Getting started</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/7eac7ac93049bfac.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7eac7ac93049bfac.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/getting-started-d599a58b1b2d57e5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Getting started</h1>
 <div id="get-started-with-a-template" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-started-with-a-template">Get started with a template</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates.
 All templates include required dependencies and pre-configured settings.
@@ -15,17 +15,17 @@
 <p class="MdxTypography_paragraph__Lp7wh">To get started with a template, open it on GitHub and click on the &quot;Use this template&quot;
 button. Note that you need to be logged in to your GitHub account to use this feature.
 If you are not familiar with GitHub, you can find a detailed instruction on how to
-bootstrap a project from a template <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">on this page</a>.</p>
+bootstrap a project from a template <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">on this page</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Templates list:</p>
 <table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mmmhlbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mmmhlbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mmmhlbblu6:)" 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"></path><path fill="url(#vite-b-:R2mmmhlbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mnmhlbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mnmhlbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mnmhlbblu6:)" 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"></path><path fill="url(#vite-b-:R2mnmhlbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with minimal setup – no additional tools included, only default Vite configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2momhlbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2momhlbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2momhlbblu6:)" 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"></path><path fill="url(#vite-b-:R2momhlbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with minimal setup – no additional tools included, only default Remix configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="gatsby"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">gatsby-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Gatsby template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/gatsby-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="redwood"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">redwood-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">RedwoodJS template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/redwood-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="framework-guide" data-heading="Framework guide" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#framework-guide">Framework guide</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow one of the guides below to get started with Mantine and your preferred framework.
 Note that usually it is better to start a new project with a template. Use guides if you want
 to add Mantine to an existing project or if enjoy doing things manually.</p>
-<div class="FrameworksGuides_root__fQ6ev"><a class="FrameworkLink_link__TzrW5" href="/guides/next"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div><div class="FrameworkLink_name___1iur">Next.js</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/vite"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R52dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R52dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R52dbblu6:)" 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"></path><path fill="url(#vite-b-:R52dbblu6:)" 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"></path></svg></div><div class="FrameworkLink_name___1iur">Vite</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/remix"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div><div class="FrameworkLink_name___1iur">Remix</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/redwood"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div><div class="FrameworkLink_name___1iur">RedwoodJS</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/gatsby"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div><div class="FrameworkLink_name___1iur">Gatsby</div></a></div>
+<div class="FrameworksGuides_root__fQ6ev"><a class="FrameworkLink_link__TzrW5" href="/guides/next/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div><div class="FrameworkLink_name___1iur">Next.js</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/vite/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R52dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R52dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R52dbblu6:)" 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"></path><path fill="url(#vite-b-:R52dbblu6:)" 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"></path></svg></div><div class="FrameworkLink_name___1iur">Vite</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/remix/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div><div class="FrameworkLink_name___1iur">Remix</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/redwood/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div><div class="FrameworkLink_name___1iur">RedwoodJS</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/gatsby/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div><div class="FrameworkLink_name___1iur">Gatsby</div></a></div>
 <div id="get-started-without-framework" data-heading="Get started without framework" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-started-without-framework">Get started without framework</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R5dll2tbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raq6l2tbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqal2tbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqel2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqil2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqml2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqql2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqul2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rar2l2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rar6l2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raral2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rarel2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raril2tbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file at the root of your application with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -54,7 +54,7 @@
 <span class="hljs-comment">// import &#x27;@mantine/dropzone/styles.css&#x27;;</span>
 <span class="hljs-comment">// import &#x27;@mantine/code-highlight/styles.css&#x27;;</span>
 <span class="hljs-comment">// ...</span></code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Wrap your application with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Wrap your application with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -68,7 +68,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">If your application has server side rendering, add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a>
+<p class="MdxTypography_paragraph__Lp7wh">If your application has server side rendering, add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a>
 to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;head /&gt;</code> of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSchemeScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -94,14 +94,14 @@
 <p class="MdxTypography_paragraph__Lp7wh">Before you jump into the code, it is recommended to learn more about Mantine theming and styling options.
 The most important documentation pages are:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/overview">API overview</a> – overview of the most important Mantine styling and theming features</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">Theme object</a> – learn about available theme properties</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors">Colors</a> – learn how to add/replace colors in the theme object</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> – learn how to use CSS modules with Mantine</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> – learn about <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-preset-mantine</code> functions and mixins</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive">Responsive styles</a> – learn how to apply responsive styles to components</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> – learn how to style internal elements of any component</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">Polymorphic components</a> – learn how to use polymorphic components to change rendered element</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/overview/">API overview</a> – overview of the most important Mantine styling and theming features</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">Theme object</a> – learn about available theme properties</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/">Colors</a> – learn how to add/replace colors in the theme object</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> – learn how to use CSS modules with Mantine</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> – learn about <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-preset-mantine</code> functions and mixins</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive/">Responsive styles</a> – learn how to apply responsive styles to components</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> – learn how to style internal elements of any component</li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">Polymorphic components</a> – learn how to use polymorphic components to change rendered element</li>
 </ul>
 <div id="get-help" data-heading="Get help" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#get-help">Get help</a></h2>
 <div class="SocialCards_cards__QnIAV"><a class="SocialCards_card__zSACa SocialCards_discord__wJcyB" target="_blank" rel="noreferrer" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards_icon__3BbPj"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg><div><div class="SocialCards_title__XUXj5">Join Discord community</div><div class="SocialCards_description__dGKpR">Ask questions, share feedback, get updates, learn about upcoming features and more</div></div></a><a class="SocialCards_card__zSACa SocialCards_github__M_OHW" target="_blank" rel="noreferrer" href="https://github.com/mantinedev/mantine/discussions"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" fill="currentColor" class="SocialCards_icon__3BbPj"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg><div><div class="SocialCards_title__XUXj5">Start a discussion</div><div class="SocialCards_description__dGKpR">Request new features, ask questions and provide feedback with GitHub discussions</div></div></a></div>
@@ -121,7 +121,7 @@
 bug reports and feature requests, it is always nice to hear that people enjoy working with Mantine.</li>
 <li class="MdxTypography_li__JpNrx">Star the project on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine">GitHub</a>. It is a small thing that helps us grow and get more
 people interested in the project.</li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/contribute">Contribute</a> to the Mantine codebase. We welcome all kinds of contributions: if you do not have much
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/contribute/">Contribute</a> to the Mantine codebase. We welcome all kinds of contributions: if you do not have much
 experience with React/TypeScript, you can help us improve the documentation to make it more clear and understandable
 for new developers. If you are an experienced React developer, you can help us with open <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22">issues</a>.</li>
 <li class="MdxTypography_li__JpNrx">If you are using Mantine at work and your company wants to support the project, you can allocate some time
@@ -140,4 +140,4 @@
 <div id="license" data-heading="License" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#license">License</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages are distributed under <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE">MIT</a> license.
 You can use them in any project, commercial or not, with or without attribution. All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages
-dependencies are also distributed under MIT license.</p></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/getting-started","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+dependencies are also distributed under MIT license.</p></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/getting-started","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/6x-to-7x.html b/guides/6x-to-7x/index.html
similarity index 72%
rename from guides/6x-to-7x.html
rename to guides/6x-to-7x/index.html
index 13605b08857..a7ff280fc18 100644
--- a/guides/6x-to-7x.html
+++ b/guides/6x-to-7x/index.html
@@ -3,24 +3,24 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/6x-to-7x-dd0ccf2353b8f509.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">6.x → 7.x migration guide</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/6x-to-7x-dd0ccf2353b8f509.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">6.x → 7.x migration guide</h1>
 <p class="MdxTypography_paragraph__Lp7wh">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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/changelog/7-0-0">7.0.0 changelog</a>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Before getting started, it is recommended to go through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">styles</a> documentation.
+For that, please see the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/changelog/7-0-0/">7.0.0 changelog</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">Before getting started, it is recommended to go through <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">styles</a> documentation.
 Most notable parts:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">Mantine PostCSS preset</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes">data-* attributes</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a></li>
-<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive">Responsive styles</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">Mantine PostCSS preset</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes/">data-* attributes</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a></li>
+<li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive/">Responsive styles</a></li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Note that this guide assumes that you have <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> installed and configured
+<p class="MdxTypography_paragraph__Lp7wh">Note that this guide assumes that you have <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> installed and configured
 in your project.</p>
 <div id="createstyles" data-heading="createStyles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#createstyles">createStyles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createStyles</code> function is no longer available in 7.0. Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a> instead.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">createStyles</code> function is no longer available in 7.0. Use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a> instead.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// 6.x</span>
 <span class="hljs-keyword">import</span> { createStyles } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -34,7 +34,7 @@
   <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-red-<span class="hljs-number">5</span>);
 }</code></pre></div></div></div></div>
 <div id="sx-prop" data-heading="sx prop" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#sx-prop">sx prop</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">sx</code> prop is no longer available in 7.0. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style">style prop</a> instead.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">sx</code> prop is no longer available in 7.0. Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style/">style prop</a> instead.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// 6.x</span>
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -47,7 +47,7 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">backgroundColor:</span> &#x27;<span class="hljs-attr">var</span>(<span class="hljs-attr">--mantine-color-red-5</span>)&#x27; }} /&gt;</span></span>;
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Nested selectors are not supported in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style">style prop</a>, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> instead:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Nested selectors are not supported in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style/">style prop</a>, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> instead:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// 6.x</span>
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -152,8 +152,8 @@
   <span class="hljs-attribute">background-color</span>: pink;
 }</code></pre></div></div></div></div>
 <div id="theme-referencing" data-heading="theme referencing" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theme-referencing">theme referencing</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> properties are now available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>. It is recommended to use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> instead of referencing theme object in styles.</p>
+<p class="MdxTypography_paragraph__Lp7wh">All <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> properties are now available as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>. It is recommended to use
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> instead of referencing theme object in styles.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// 6.x</span>
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -175,12 +175,12 @@
   <span class="hljs-attribute">padding</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-built_in">var</span>(--mantine-spacing-xl) * <span class="hljs-number">2</span>);
 }</code></pre></div></div></div></div>
 <div id="themecolorscheme" data-heading="theme.colorScheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#themecolorscheme">theme.colorScheme</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Color scheme value is managed by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>,
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a> no longer includes <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorScheme</code> property.
+<p class="MdxTypography_paragraph__Lp7wh">Color scheme value is managed by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>,
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a> no longer includes <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorScheme</code> property.
 Although it is still possible to access color scheme value in components with
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes#use-mantine-color-scheme-hook">useMantineColorScheme</a> hook,
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/#use-mantine-color-scheme-hook">useMantineColorScheme</a> hook,
 it is not recommended to base your styles on its value. Instead, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code>
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">mixins</a> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light-dark</code> CSS <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset#light-dark-function">function</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">mixins</a> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light-dark</code> CSS <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/#light-dark-function">function</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Example of 6.x <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createStyles</code> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colorScheme</code> migration to 7.0:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// 6.x</span>
 <span class="hljs-keyword">import</span> { createStyles } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -210,7 +210,7 @@
   }
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Note that if your application has server-side rendering, you should not render any
-elements based on its value (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes#color-scheme-value-caveats">more info</a>).
+elements based on its value (<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/#color-scheme-value-caveats">more info</a>).
 Instead, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> mixins or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light-dark</code> function to hide/display elements based
 on color scheme value.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Color scheme toggle example:</p>
@@ -234,4 +234,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">IconMoon</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{cx(classes.icon,</span> <span class="hljs-attr">classes.dark</span>)} <span class="hljs-attr">stroke</span>=<span class="hljs-string">{1.5}</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">ActionIcon</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/jest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Testing with Jest</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-click-outside"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-click-outside</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/6x-to-7x","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/jest/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Testing with Jest</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-click-outside/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-click-outside</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/6x-to-7x","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/gatsby.html b/guides/gatsby/index.html
similarity index 72%
rename from guides/gatsby.html
rename to guides/gatsby/index.html
index d750d33964d..a3acea29b29 100644
--- a/guides/gatsby.html
+++ b/guides/gatsby/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/gatsby-1849339aaa7d5b04.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Gatsby</h1>
-<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="gatsby"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">gatsby-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Gatsby template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/gatsby-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/gatsby-1849339aaa7d5b04.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Gatsby</h1>
+<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest/">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook/">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="gatsby"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">gatsby-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Gatsby template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/gatsby-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="generate-new-application" data-heading="Generate new application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#generate-new-application">Generate new application</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.gatsbyjs.com/docs/quick-start/">Gatsby quick start</a> guide to
 create new Gatsby application:</p>
@@ -13,7 +13,7 @@
 <div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R2mqqhtbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d3ahtbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d5ahtbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d7ahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d9ahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dbahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5ddahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dfahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dhahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5djahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dlahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dnahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dpahtbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="postcss-setup" data-heading="PostCSS setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-setup">PostCSS setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file at the root of your application with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -71,4 +71,4 @@
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
 <span class="hljs-comment">// Gatsby syntax</span>
-<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/remix"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Remix</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/redwood"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Redwood</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/gatsby","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/remix/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Remix</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/redwood/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Redwood</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/gatsby","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/icons.html b/guides/icons/index.html
similarity index 65%
rename from guides/icons.html
rename to guides/icons/index.html
index a88f99afc1e..c341315f976 100644
--- a/guides/icons.html
+++ b/guides/icons/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/icons-bb3bdf860e34f5f5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Icons libraries with Mantine</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/icons-bb3bdf860e34f5f5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Icons libraries with Mantine</h1>
 <p class="MdxTypography_paragraph__Lp7wh">You can use any icons library with Mantine components, most popular options are:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://tabler-icons.io/">Tabler icons</a></li>
@@ -18,9 +18,9 @@
 to use, we recommend <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://tabler-icons.io/">Tabler icons</a>.</p>
 <div id="icons-size" data-heading="Icons size" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#icons-size">Icons size</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of the icons libraries support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">size</code> prop (or similar <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> props) which allows changing
-icon width and height. Usually, it is a number in pixels. All Mantine components use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a>
+icon width and height. Usually, it is a number in pixels. All Mantine components use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a>
 units – components are scaled based on user preferences and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code> of the root element. If you want to
-support this feature in your application, set icon width and height in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem</a> units with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop.</p>
+support this feature in your application, set icon width and height in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem</a> units with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--mantine-color-blue-filled)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(5rem * var(--mantine-scale));height:calc(5rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconBrandMantine</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 
@@ -69,4 +69,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M11 11a2 2 0 104 0 2 2 0 10-4 0M4 8h3M4 12h3M4 16h3&quot;</span> /&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/polymorphic"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Polymorphic components</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/next"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Next.js</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/icons","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/polymorphic/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Polymorphic components</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/next/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Next.js</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/icons","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/javascript.html b/guides/javascript/index.html
similarity index 57%
rename from guides/javascript.html
rename to guides/javascript/index.html
index fb1635dd2e8..51cd340efbe 100644
--- a/guides/javascript.html
+++ b/guides/javascript/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/javascript-6451fb2a4105e6b9.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with JavaScript</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/javascript-6451fb2a4105e6b9.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with JavaScript</h1>
 <div id="is-it-possible-to-use-mantine-with-javascript" data-heading="Is it possible to use Mantine with JavaScript?" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#is-it-possible-to-use-mantine-with-javascript">Is it possible to use Mantine with JavaScript?</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Yes, it is possible to use all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages (as well as all other npm packages) with JavaScript.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages are written in TypeScript and have type definitions, so you will get some the benefits
@@ -38,5 +38,5 @@
 help you during migration to new versions of Mantine – you will get type errors when props/components
 that you have in your code are removed/renamed/changed.</p>
 <p class="MdxTypography_paragraph__Lp7wh">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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started">templates</a> to get started – all of them include
-TypeScript support out of the box.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/typescript"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with TypeScript</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/jest"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Testing with Jest</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/javascript","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+to learn it. You can use any of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started/">templates</a> to get started – all of them include
+TypeScript support out of the box.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/typescript/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with TypeScript</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/jest/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Testing with Jest</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/javascript","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/jest.html b/guides/jest/index.html
similarity index 62%
rename from guides/jest.html
rename to guides/jest/index.html
index 1b16e697f02..79ba4913555 100644
--- a/guides/jest.html
+++ b/guides/jest/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/jest-a2c47b0728b8b4eb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Testing with Jest</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/jest-a2c47b0728b8b4eb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Testing with Jest</h1>
 <p class="MdxTypography_paragraph__Lp7wh">This guide will help you setup <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://jestjs.io/">Jest</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://testing-library.com/docs/react-testing-library/intro">React Testing Library</a> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://jestjs.io/">Jest</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://testing-library.com/docs/react-testing-library/intro">React Testing Library</a> as it may vary depending on the framework you are using.</p>
 <div id="custom-render" data-heading="Custom render" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#custom-render">Custom render</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All Mantine components require <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> to be present in the component tree.
-To add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> to the component tree in your tests, create a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://testing-library.com/docs/react-testing-library/setup/#custom-render">custom render</a>
+<p class="MdxTypography_paragraph__Lp7wh">All Mantine components require <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> to be present in the component tree.
+To add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> to the component tree in your tests, create a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://testing-library.com/docs/react-testing-library/setup/#custom-render">custom render</a>
 function:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// ./test-utils/render.tsx</span>
 <span class="hljs-keyword">import</span> { render <span class="hljs-keyword">as</span> testingLibraryRender } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@testing-library/react&#x27;</span>;
@@ -84,5 +84,5 @@
 <p class="MdxTypography_paragraph__Lp7wh">Jest setup for different frameworks may vary and usually change over time.
 To learn hot to setup Jest for your framework, either check <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://jestjs.io/docs/getting-started">Jest</a>
 and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://testing-library.com/docs/react-testing-library/intro">React Testing Library</a> documentation
-or check one of the premade <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started">templates</a>. Most of the templates include Jest setup, and
-you can use them as a reference.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/javascript"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with JavaScript</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/6x-to-7x"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">6.x to 7.x migration</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/jest","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+or check one of the premade <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started/">templates</a>. Most of the templates include Jest setup, and
+you can use them as a reference.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/javascript/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with JavaScript</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/6x-to-7x/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">6.x to 7.x migration</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/jest","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/next.html b/guides/next/index.html
similarity index 68%
rename from guides/next.html
rename to guides/next/index.html
index c86e60cc15d..ea9dd64d8d3 100644
--- a/guides/next.html
+++ b/guides/next/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/next-670e1444622eb2a6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Next.js</h1>
-<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/next-670e1444622eb2a6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Next.js</h1>
+<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest/">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook/">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-app-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-app-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-pages-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-pages-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="next"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">next-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Next.js template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/next-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="generate-new-application" data-heading="Generate new application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#generate-new-application">Generate new application</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://nextjs.org/docs/pages/api-reference/create-next-app">create-next-app</a> guide to
 create new Next.js application:</p>
@@ -12,7 +12,7 @@
 <div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R5dll1lbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raq6l1lbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqal1lbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqel1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqil1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqml1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqql1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raqul1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rar2l1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rar6l1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raral1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rarel1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Raril1lbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="postcss-setup" data-heading="PostCSS setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-setup">PostCSS setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file at the root of your application with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -30,7 +30,7 @@
   },
 };</code></pre></div></div></div></div>
 <div id="setup-with-pages-router" data-heading="Setup with pages router" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup-with-pages-router">Setup with pages router</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add styles imports and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">pages/_app.tsx</code> file:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Add styles imports and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">pages/_app.tsx</code> file:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Import styles of packages that you&#x27;ve installed.</span>
 <span class="hljs-comment">// All packages except `@mantine/hooks` require styles imports</span>
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles.css&#x27;</span>;
@@ -49,7 +49,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">pages/_document.tsx</code> file with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> component.
+<p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">pages/_document.tsx</code> file with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> component.
 Note that it is required even if you use only one color scheme in your application.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Html</span>, <span class="hljs-title class_">Head</span>, <span class="hljs-title class_">Main</span>, <span class="hljs-title class_">NextScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;next/document&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">ColorSchemeScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -70,7 +70,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">All set! Start development server:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npm run dev</code></pre></div></div></div></div>
 <div id="setup-with-app-router" data-heading="Setup with app router" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup-with-app-router">Setup with app router</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a>
+<p class="MdxTypography_paragraph__Lp7wh">Add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a>
 and styles imports to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">app/layout.tsx</code> file:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Import styles of packages that you&#x27;ve installed.</span>
 <span class="hljs-comment">// All packages except `@mantine/hooks` require styles imports</span>
@@ -125,13 +125,13 @@
   );
 }</code></pre></div></div></div></div>
 <div id="server-components" data-heading="Server components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#server-components">Server components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All Mantine components use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useContext</code> hook to support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a>
-and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>. Mantine components cannot be used as server components.
+<p class="MdxTypography_paragraph__Lp7wh">All Mantine components use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useContext</code> hook to support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a>
+and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>. Mantine components cannot be used as server components.
 It means that components will render both on the server and client.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Entry points of all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> packages (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">index.js</code> files) have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&#x27;use client&#x27;;</code> directive at the
 top of the file – you do not need to add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&#x27;use client&#x27;;</code> to your pages/layouts/components.</p>
 <div id="compound-components-in-server-components" data-heading="Compound components in server components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#compound-components-in-server-components">Compound components in server components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover">Popover</a> have associated compound components (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Component.XXX</code>),
+<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/popover/">Popover</a> have associated compound components (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Component.XXX</code>),
 where <code class="m-b183c0a2 mantine-Code-root" dir="ltr">XXX</code> is a compound component name. Compound components cannot be used in server components.
 Instead, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ComponentXXX</code> syntax or add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&#x27;use client&#x27;;</code> directive to the top of the file.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Example that will not work in server components:</p>
@@ -170,4 +170,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">PopoverDropdown</span>&gt;</span>Dropdown<span class="hljs-tag">&lt;/<span class="hljs-name">PopoverDropdown</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Popover</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Icons libraries</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/vite"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Vite</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/next","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/icons/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Icons libraries</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/vite/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Vite</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/next","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/polymorphic.html b/guides/polymorphic/index.html
similarity index 73%
rename from guides/polymorphic.html
rename to guides/polymorphic/index.html
index 81805205c6a..285e278f73e 100644
--- a/guides/polymorphic.html
+++ b/guides/polymorphic/index.html
@@ -3,11 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/polymorphic-6869c2a748b698b0.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Polymorphic components</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/polymorphic-6869c2a748b698b0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Polymorphic components</h1>
 <div id="what-is-a-polymorphic-component" data-heading="What is a polymorphic component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#what-is-a-polymorphic-component">What is a polymorphic component</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">A polymorphic component is a component which root element can be changed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop.
 All polymorphic components have a default element which is used when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop is not provided.
-For example, the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component default element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> and
+For example, the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component default element is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">button</code> and
 it can be changed to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">a</code> or any other element or component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><a class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" href="https://mantine.dev/" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Mantine website</span></span></a></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -57,7 +57,7 @@
 }</code></pre></div></div></div></div>
 <div id="wrapping-polymorphic-components" data-heading="Wrapping polymorphic components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#wrapping-polymorphic-components">Wrapping polymorphic components</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Non-polymorphic components include <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef&lt;&#x27;x&#x27;&gt;</code> as a part of their props type,
-where <code class="m-b183c0a2 mantine-Code-root" dir="ltr">x</code> is a root element of the component. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/container">Container</a> component
+where <code class="m-b183c0a2 mantine-Code-root" dir="ltr">x</code> is a root element of the component. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/container/">Container</a> component
 is not polymorphic – its root element is always <code class="m-b183c0a2 mantine-Code-root" dir="ltr">div</code>, so its props type includes <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef&lt;&#x27;div&#x27;&gt;</code>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Polymorphic components do not include <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef&lt;&#x27;x&#x27;&gt;</code> as a part of their props type
 because their root element can be changed, and thus props type can be inferred only after the component was rendered.</p>
@@ -127,7 +127,7 @@
   <span class="hljs-keyword">return</span> &lt;<span class="hljs-title class_">Box</span>&lt;<span class="hljs-built_in">any</span>&gt; component={<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &gt; <span class="hljs-number">0.5</span> ? <span class="hljs-string">&#x27;input&#x27;</span> : <span class="hljs-string">&#x27;div&#x27;</span>} /&gt;;
 }</code></pre></div></div></div></div>
 <div id="create-your-own-polymorphic-components" data-heading="Create your own polymorphic components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#create-your-own-polymorphic-components">Create your own polymorphic components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/box">Box</a> component to create new polymorphic components:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createPolymorphicComponent</code> function and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/box/">Box</a> component to create new polymorphic components:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="">Button by default</button><a class="" href="https://mantine.dev" target="_blank">MyButton as anchor</a></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { forwardRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span>, <span class="hljs-title class_">BoxProps</span>, createPolymorphicComponent, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -168,4 +168,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">PolymorphicGroup</span> <span class="hljs-attr">component</span>=<span class="hljs-string">&quot;a&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://mantine.dev&quot;</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-performance"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles performance</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/icons"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Icons libraries</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/polymorphic","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-performance/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles performance</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/icons/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Icons libraries</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/polymorphic","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/redwood.html b/guides/redwood/index.html
similarity index 68%
rename from guides/redwood.html
rename to guides/redwood/index.html
index 4f7a2837870..8ead2f82f67 100644
--- a/guides/redwood.html
+++ b/guides/redwood/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/redwood-fde4340fd64504a1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with RedwoodJS</h1>
-<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="redwood"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">redwood-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">RedwoodJS template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/redwood-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/redwood-fde4340fd64504a1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with RedwoodJS</h1>
+<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest/">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook/">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="redwood"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">redwood-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">RedwoodJS template with basic setup</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/redwood-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="generate-new-application" data-heading="Generate new application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#generate-new-application">Generate new application</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://remix.run/">Redwood getting started guide</a> guide to
 create new Redwood application:</p>
@@ -15,7 +15,7 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-built_in">cd</span> web</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R2mqqidbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d3aidbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d5aidbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d7aidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d9aidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dbaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5ddaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dfaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dhaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5djaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dlaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dnaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dpaidbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="postcss-setup" data-heading="PostCSS setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-setup">PostCSS setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars postcss-loader</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">web</code> directory with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -46,7 +46,7 @@
   <span class="hljs-keyword">return</span> config;
 };</code></pre></div></div></div></div>
 <div id="setup" data-heading="Setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup">Setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add styles imports, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a>
+<p class="MdxTypography_paragraph__Lp7wh">Add styles imports, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a>
 to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">web/src/App.tsx</code> file:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Import styles of packages that you&#x27;ve installed.</span>
 <span class="hljs-comment">// All packages except `@mantine/hooks` require styles imports</span>
@@ -75,4 +75,4 @@
 
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span>;</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">All set! Start development server:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">yarn rw dev</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/gatsby"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Gatsby</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/storybook"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Storybook</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/redwood","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">yarn rw dev</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/gatsby/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Gatsby</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/storybook/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Storybook</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/redwood","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/remix.html b/guides/remix/index.html
similarity index 67%
rename from guides/remix.html
rename to guides/remix/index.html
index 6505ca2e1fa..c127cbc14c9 100644
--- a/guides/remix.html
+++ b/guides/remix/index.html
@@ -3,15 +3,15 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/remix-6f4ef41250d55d42.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Remix</h1>
-<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with minimal setup – no additional tools included, only default Remix configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/remix-6f4ef41250d55d42.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Remix</h1>
+<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest/">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook/">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="remix"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="icons_nextIcon__qYiGH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">remix-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Remix template with minimal setup – no additional tools included, only default Remix configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/remix-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="generate-new-application" data-heading="Generate new application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#generate-new-application">Generate new application</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://remix.run/">Remix getting started guide</a> guide to create new Remix application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npx create-remix@latest</code></pre></div></div></div></div>
 <div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R2mqqhlbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d3ahlbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d5ahlbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d7ahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d9ahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dbahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5ddahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dfahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dhahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5djahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dlahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dnahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dpahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="postcss-setup" data-heading="PostCSS setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-setup">PostCSS setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file at the root of your application with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -34,7 +34,7 @@
   <span class="hljs-comment">// ... other options</span>
 };</code></pre></div></div></div></div>
 <div id="setup" data-heading="Setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup">Setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add styles imports, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">app/root.tsx</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Add styles imports, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">app/root.tsx</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Import styles of packages that you&#x27;ve installed.</span>
 <span class="hljs-comment">// All packages except `@mantine/hooks` require styles imports</span>
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles.css&#x27;</span>;
@@ -86,4 +86,4 @@
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">Currently, Remix team <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/remix-run/remix/issues/6026#issuecomment-1507256309">is not planning</a>
 to fix this issue. If you are experiencing hydration mismatches, try opening the same page in
-incognito mode (usually extensions are disabled in incognito mode) or disabling browser extensions.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/vite"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Vite</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/gatsby"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Gatsby</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/remix","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+incognito mode (usually extensions are disabled in incognito mode) or disabling browser extensions.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/vite/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Vite</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/gatsby/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Gatsby</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/remix","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/storybook.html b/guides/storybook/index.html
similarity index 65%
rename from guides/storybook.html
rename to guides/storybook/index.html
index f004553104f..b8bc99a1343 100644
--- a/guides/storybook.html
+++ b/guides/storybook/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/storybook-49240b71a1938687.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Setup Mantine in Storybook</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/storybook-49240b71a1938687.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Setup Mantine in Storybook</h1>
 <p class="MdxTypography_paragraph__Lp7wh">Note that this guide covers only Storybook 7.0+ integration. If you are using older version of Storybook,
 it will not work for you.</p>
 <div id="add-storybook-to-your-application" data-heading="Add Storybook to your application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#add-storybook-to-your-application">Add Storybook to your application</a></h2>
@@ -32,7 +32,7 @@
 
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> config;</code></pre></div></div></div></div>
 <div id="theme-object" data-heading="Theme object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theme-object">Theme object</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To shared <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a> between your application and Storybook, create
+<p class="MdxTypography_paragraph__Lp7wh">To shared <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a> between your application and Storybook, create
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">src/theme.ts</code> (or any other path in your application) file with your theme override:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// src/theme.ts</span>
 <span class="hljs-keyword">import</span> { createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -84,4 +84,4 @@
   <span class="hljs-function">(<span class="hljs-params">renderStory: <span class="hljs-built_in">any</span></span>) =&gt;</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineProvider</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">{theme}</span>&gt;</span>{renderStory()}<span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>,
 ];</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">All set! Start Storybook:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npm run storybook</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/redwood"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Redwood</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/typescript"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with TypeScript</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/storybook","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npm run storybook</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/redwood/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Redwood</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/typescript/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with TypeScript</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/storybook","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/typescript.html b/guides/typescript/index.html
similarity index 68%
rename from guides/typescript.html
rename to guides/typescript/index.html
index 3414842e52b..66ea4127de9 100644
--- a/guides/typescript.html
+++ b/guides/typescript/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/typescript-a1d7cdd0bae95894.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with TypeScript</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/typescript-a1d7cdd0bae95894.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with TypeScript</h1>
 <p class="MdxTypography_paragraph__Lp7wh">All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*</code> 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.</p>
 <p class="MdxTypography_paragraph__Lp7wh">This guide will help you get familiar with types that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package exports.</p>
@@ -27,9 +27,9 @@
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">MyGroup</span>(<span class="hljs-params">{ spacing, ...others }: MyGroupProps</span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">my</span>=<span class="hljs-string">{spacing}</span> {<span class="hljs-attr">...others</span>} /&gt;</span></span>;
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">Polymorphic components</a> props types do not include <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef&lt;&#x27;X&#x27;&gt;</code>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">Polymorphic components</a> props types do not include <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef&lt;&#x27;X&#x27;&gt;</code>
 because their root element depends on the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">component</code> prop value.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Example of extending <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic">polymorphic components</a> props:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of extending <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/polymorphic/">polymorphic components</a> props:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ButtonProps</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">ElementProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyButtonProps</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ButtonProps</span>, <span class="hljs-title class_">ElementProps</span>&lt;&#x27;button&#x27;, keyof <span class="hljs-title class_">ButtonProps</span>&gt; {
@@ -41,7 +41,7 @@
 }</code></pre></div></div></div></div>
 <div id="elementprops-type" data-heading="ElementProps type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#elementprops-type">ElementProps type</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ElementProps</code> is a utility type similar to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.ComponentPropsWithoutRef</code>, but with additional
-features. It replaces native elements <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop with Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style">style prop</a> and
+features. It replaces native elements <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop with Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style/">style prop</a> and
 allows omitting properties that are passed as a second type.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ElementProps</span>, <span class="hljs-title class_">ButtonProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -56,7 +56,7 @@
 <span class="hljs-comment">// Equivalent of `Omit&lt;React.ComponentPropsWithoutRef&lt;&#x27;button&#x27;&gt;, keyof ButtonProps&gt;`</span>
 <span class="hljs-keyword">type</span> <span class="hljs-title class_">OmitButtonProps</span> = <span class="hljs-title class_">ElementProps</span>&lt;<span class="hljs-string">&#x27;button&#x27;</span>, keyof <span class="hljs-title class_">ButtonProps</span>&gt;;</code></pre></div></div></div></div>
 <div id="mantinetheme-type" data-heading="MantineTheme type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#mantinetheme-type">MantineTheme type</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineTheme</code> is a type of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. You can use it to add types
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineTheme</code> is a type of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. You can use it to add types
 to functions that accept theme object as an argument:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineTheme</span>, useMantineTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -140,4 +140,4 @@
   }
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">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.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/storybook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Storybook</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/javascript"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with JavaScript</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/typescript","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+make your theme object types more strict and add autocomplete in your editor.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/storybook/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Storybook</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/javascript/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with JavaScript</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/typescript","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/guides/vite.html b/guides/vite/index.html
similarity index 66%
rename from guides/vite.html
rename to guides/vite/index.html
index 82a22716a66..a18b6fd27c1 100644
--- a/guides/vite.html
+++ b/guides/vite/index.html
@@ -3,15 +3,15 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/vite-234e7409487e5120.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/vite">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Vite</h1>
-<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mmr0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mmr0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mmr0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mmr0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mqr0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mqr0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mqr0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mqr0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with minimal setup – no additional tools included, only default Vite configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mur0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mur0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mur0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mur0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/guides/vite-234e7409487e5120.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/polymorphic/">Polymorphic components</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/icons/">Icons libraries</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/next/">Usage with Next.js</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/guides/vite/">Usage with Vite</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/remix/">Usage with Remix</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/gatsby/">Usage with Gatsby</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/redwood/">Usage with Redwood</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/storybook/">Usage with Storybook</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/typescript/">Usage with TypeScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/javascript/">Usage with JavaScript</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/jest/">Testing with Jest</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/guides/6x-to-7x/">6.x to 7.x migration</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Usage with Vite</h1>
+<div id="templates" data-heading="Get started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#templates">Get started with a template</a></h2><p class="MdxTypography_paragraph__Lp7wh">The easiest way to get started is to use one of the templates. All templates are configured correctly: they include <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS setup</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">ColorSchemeScript</a> and other essential features. Some templates also include additional features like<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/jest/">Jest</a>,<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/storybook/">Storybook</a> and ESLint.</p><p class="MdxTypography_paragraph__Lp7wh">If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/templates-usage/">this page</a>.</p><table style="--table-vertical-spacing:var(--mantine-spacing-sm)" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mmr0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mmr0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mmr0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mmr0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with full setup: Jest, Storybook, ESLint</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mqr0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mqr0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mqr0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mqr0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-min-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with minimal setup – no additional tools included, only default Vite configuration</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-min-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true" data-hover="true"><td class="m-4e7aa4ef mantine-Table-td MdxTemplatesList_iconCell__17eyA"><div class="MdxTemplatesList_icon__UgTOG" data-type="vite"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="icons_icon__inpUt" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:R2mur0dbblu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:R2mur0dbblu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:R2mur0dbblu6:)" 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"></path><path fill="url(#vite-b-:R2mur0dbblu6:)" 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"></path></svg></div></td><td class="m-4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-sm);font-weight:500" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">vite-vanilla-extract-template</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Vite template with Vanilla extract example</p></td><td class="m-4e7aa4ef mantine-Table-td"><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:var(--mantine-color-default);--button-hover:var(--mantine-color-default-hover);--button-color:var(--mantine-color-default-color);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xs" data-with-right-section="true" href="https://github.com/mantinedev/vite-vanilla-extract-template" target="_blank"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Use template</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxTemplatesList_externalLinkIcon__J5GW0"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></span></span></a></td></tr></tbody></table>
 <div id="generate-new-application" data-heading="Generate new application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#generate-new-application">Generate new application</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vitejs.dev/guide/">Vite getting started</a> guide to create new Vite application:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn create vite</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Choose packages that you will use in your application:</p><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" data-indeterminate="true" id="mantine-R2mqqhlbblu6" type="checkbox" checked=""/><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 6" class="m-bf295423 mantine-Checkbox-icon"><rect width="32" height="6" fill="currentColor" rx="3"></rect></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></th><th class="m-4e7aa4f3 mantine-Table-th">Package</th><th class="m-4e7aa4f3 mantine-Table-th MdxPackagesInstallation_hiddenMobile__LuTKD">Description</th></tr></thead><tbody><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d3ahlbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/hooks</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hooks for state and UI management</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d5ahlbblu6" type="checkbox" checked=""/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Core components library: inputs, buttons, overlays, etc.</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d7ahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/form</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Form management library</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5d9ahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dates</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Date inputs, calendars</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dbahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/notifications</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Notifications system</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5ddahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/code-highlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Code highlight with your theme colors and styles</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dfahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/tiptap</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rich text editor based on Tiptap</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dhahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/dropzone</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Capture files with drag and drop</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5djahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/carousel</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Embla based carousel component</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dlahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/spotlight</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Overlay command center</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dnahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/modals</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Centralized modals manager</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr MdxPackagesInstallation_row__qg2oU" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><div class="MdxPackagesInstallation_checkbox__FGZnv m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R5dpahlbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"></div></div></div></td><td class="m-4e7aa4ef mantine-Table-td"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/nprogress</code></td><td class="m-4e7aa4ef mantine-Table-td MdxPackagesInstallation_hiddenMobile__LuTKD"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Navigation progress</p></td></tr></tbody></table><p class="MdxTypography_paragraph__Lp7wh">Install dependencies:</p><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/core @mantine/hooks</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="postcss-setup" data-heading="PostCSS setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-setup">PostCSS setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Install PostCSS plugins and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a>:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss postcss-preset-mantine postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">Create <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file at the root of your application with the following content:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
@@ -30,7 +30,7 @@
 };</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Note that if you use Node.js 18+, you will need to replace <code class="m-b183c0a2 mantine-Code-root" dir="ltr">module.exports = </code> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">export default</code>.</p>
 <div id="setup" data-heading="Setup" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup">Setup</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Add styles imports and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> to your application root component (usually <code class="m-b183c0a2 mantine-Code-root" dir="ltr">App.tsx</code>):</p>
+<p class="MdxTypography_paragraph__Lp7wh">Add styles imports and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> to your application root component (usually <code class="m-b183c0a2 mantine-Code-root" dir="ltr">App.tsx</code>):</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Import styles of packages that you&#x27;ve installed.</span>
 <span class="hljs-comment">// All packages except `@mantine/hooks` require styles imports</span>
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles.css&#x27;</span>;
@@ -41,4 +41,4 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineProvider</span>&gt;</span>{/* Your app here */}<span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">All set! Start development server:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npm run dev</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/next"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Next.js</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/remix"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Remix</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/vite","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">npm run dev</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/next/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Next.js</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/remix/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Usage with Remix</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/guides/vite","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-click-outside.html b/hooks/use-click-outside/index.html
similarity index 59%
rename from hooks/use-click-outside.html
rename to hooks/use-click-outside/index.html
index d95435d7d92..7f3dcba5a30 100644
--- a/hooks/use-click-outside.html
+++ b/hooks/use-click-outside/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-click-outside-bda81bf5d77ae3ac.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-click-outside</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects click and touch events outside of given element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useClickOutside } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-click-outside.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-click-outside-bda81bf5d77ae3ac.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-click-outside</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects click and touch events outside of given element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useClickOutside } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-click-outside.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-dimmed="true"><div class="m-ad8eb9d6"><div style="position:relative"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open dropdown</span></span></button></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Paper</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useClickOutside } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -94,4 +94,4 @@
 <div id="set-ref-type" data-heading="Set ref type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-ref-type">Set ref type</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useClickOutside } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
-<span class="hljs-keyword">const</span> ref = useClickOutside&lt;<span class="hljs-title class_">HTMLDivElement</span>&gt;(onClickOutside);</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/6x-to-7x"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">6.x to 7.x migration</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-color-scheme"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-color-scheme</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-click-outside","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-keyword">const</span> ref = useClickOutside&lt;<span class="hljs-title class_">HTMLDivElement</span>&gt;(onClickOutside);</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/6x-to-7x/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">6.x to 7.x migration</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-color-scheme/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-color-scheme</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-click-outside","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-clipboard.html b/hooks/use-clipboard/index.html
similarity index 52%
rename from hooks/use-clipboard.html
rename to hooks/use-clipboard/index.html
index e47c55fd15b..c6cb5ad3d46 100644
--- a/hooks/use-clipboard.html
+++ b/hooks/use-clipboard/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-clipboard-de060be53aa6e8eb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-clipboard</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Wrapper around navigator.clipboard with feedback timeout</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useClipboard } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-clipboard.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-clipboard-de060be53aa6e8eb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-clipboard</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Wrapper around navigator.clipboard with feedback timeout</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useClipboard } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-clipboard.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-clipboard</code> hook provides interface to work with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">navigator.clipboard</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:var(--mantine-color-blue-filled);--button-hover:var(--mantine-color-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Copy</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useClipboard } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -38,4 +38,4 @@
   <span class="hljs-attr">reset</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">error</span>: <span class="hljs-title class_">Error</span>;
   <span class="hljs-attr">copied</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-validated-state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-validated-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-title"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-title</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-clipboard","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-validated-state/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-validated-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-title/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-title</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-clipboard","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-color-scheme.html b/hooks/use-color-scheme/index.html
similarity index 51%
rename from hooks/use-color-scheme.html
rename to hooks/use-color-scheme/index.html
index 1b2df9ef18f..40a13cec3ab 100644
--- a/hooks/use-color-scheme.html
+++ b/hooks/use-color-scheme/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-color-scheme-ec0707a6f8037d97.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-color-scheme</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects user system color scheme with window.matchMedia API</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useColorScheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-color-scheme/use-color-scheme.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-color-scheme.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-color-scheme-ec0707a6f8037d97.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-color-scheme</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects user system color scheme with window.matchMedia API</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useColorScheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-color-scheme/use-color-scheme.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-color-scheme.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-color-scheme</code> hook returns system color scheme value i.e. either <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--badge-bg:var(--mantine-color-teal-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root" data-variant="filled"><span class="m-5add502a mantine-Badge-label">Your system color scheme is <!-- -->light</span></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useColorScheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -17,7 +17,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Badge</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Hook uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query">use-media-query</a> hook under the hood.
+<p class="MdxTypography_paragraph__Lp7wh">Hook uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query/">use-media-query</a> hook under the hood.
 It relies on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">window.matchMedia()</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">API</a>
 and always returns <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code> if the API is not available (e.g. during server side rendering)
 unless an initial value is provided in the first argument.</p>
@@ -27,4 +27,4 @@
   options?: {
     getInitialValueInEffect: <span class="hljs-built_in">boolean</span>;
   }
-</span>): <span class="hljs-string">&#x27;dark&#x27;</span> | <span class="hljs-string">&#x27;light&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-click-outside"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-click-outside</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-element-size"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-element-size</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-color-scheme","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</span>): <span class="hljs-string">&#x27;dark&#x27;</span> | <span class="hljs-string">&#x27;light&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-click-outside/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-click-outside</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-element-size/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-element-size</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-color-scheme","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-counter.html b/hooks/use-counter/index.html
similarity index 53%
rename from hooks/use-counter.html
rename to hooks/use-counter/index.html
index 279820b66a0..64bb8862ef7 100644
--- a/hooks/use-counter.html
+++ b/hooks/use-counter/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-counter-4cc3020cb3b5418d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-counter</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Increments/decrements state within given boundaries</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useCounter } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-counter/use-counter.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-counter.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-counter-4cc3020cb3b5418d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-counter</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Increments/decrements state within given boundaries</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useCounter } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-counter/use-counter.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-counter.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-md);--text-lh:var(--mantine-line-height-md);padding-top:var(--mantine-spacing-xs);padding-bottom:var(--mantine-spacing-xs);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="md">Count: <!-- -->0</p><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Increment</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Decrement</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Reset</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Set 5</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useCounter } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -37,4 +37,4 @@
     <span class="hljs-attr">set</span>: <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-built_in">number</span></span>) =&gt;</span> <span class="hljs-built_in">void</span>;
     <span class="hljs-attr">reset</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   }
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-scroll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-scroll</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-state"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-counter","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-scroll/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-scroll</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-state/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-counter","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-debounced-state.html b/hooks/use-debounced-state/index.html
similarity index 56%
rename from hooks/use-debounced-state.html
rename to hooks/use-debounced-state/index.html
index 71f2de72b4a..97958b64169 100644
--- a/hooks/use-debounced-state.html
+++ b/hooks/use-debounced-state/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-debounced-state-5d0d2dbf56edf5d2.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-debounced-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Debounces value changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDebouncedState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-debounced-state/use-debounced-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-debounced-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-debounced-state-5d0d2dbf56edf5d2.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-debounced-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Debounces value changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDebouncedState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-debounced-state/use-debounced-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-debounced-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-debounced-state</code> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-debounced-value">use-debounced-value</a> it
+for example, send search request. Unlike <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-debounced-value/">use-debounced-value</a> it
 is designed to work with uncontrolled components.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1mklbblu6" id="mantine-R1mklbblu6-label">Enter value to see debounce effect</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter value to see debounce effect" aria-invalid="false" id="mantine-R1mklbblu6" value=""/></div></div><p style="margin-top:var(--mantine-spacing-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root"><span style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Debounced value:</span> <!-- -->[empty string]</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDebouncedState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -59,4 +59,4 @@
   options?: {
     <span class="hljs-attr">leading</span>: <span class="hljs-built_in">boolean</span>;
   }
-): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">newValue: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-counter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-counter</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-value"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-value</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-debounced-state","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">newValue: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-counter/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-counter</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-value/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-value</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-debounced-state","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-debounced-value.html b/hooks/use-debounced-value/index.html
similarity index 60%
rename from hooks/use-debounced-value.html
rename to hooks/use-debounced-value/index.html
index c7b4b2df4e8..eafe97ce691 100644
--- a/hooks/use-debounced-value.html
+++ b/hooks/use-debounced-value/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-debounced-value-e930c8268c0b0b9b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-debounced-value</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Debounces value changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDebouncedValue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-debounced-value/use-debounced-value.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-debounced-value.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-debounced-value-e930c8268c0b0b9b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-debounced-value</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Debounces value changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDebouncedValue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-debounced-value/use-debounced-value.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-debounced-value.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-debounced-value</code> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-debounced-state">use-debounced-state</a> it
+for example, send search request. Unlike <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-debounced-state/">use-debounced-state</a> it
 is designed to work with controlled components.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="margin-right:auto;margin-left:auto;max-width:calc(25rem * var(--mantine-scale))" class=""><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1mklbblu6" id="mantine-R1mklbblu6-label">Enter value to see debounce effect</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter value to see debounce effect" aria-invalid="false" id="mantine-R1mklbblu6" value=""/></div></div><p style="margin-top:var(--mantine-spacing-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root"><span style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Value:</span> <!-- -->[empty string]</p><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root"><span style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Debounced value:</span> <!-- -->[empty string]</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useDebouncedValue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -95,4 +95,4 @@
   options?: {
     <span class="hljs-attr">leading</span>: <span class="hljs-built_in">boolean</span>;
   }
-): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-disclosure"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-disclosure</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-debounced-value","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-state/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-disclosure/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-disclosure</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-debounced-value","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-did-update.html b/hooks/use-did-update.html
deleted file mode 100644
index 657b6d118a3..00000000000
--- a/hooks/use-did-update.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-did-update | Mantine</title><meta name="description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="og:title" content="use-did-update | Mantine"/><meta name="og:description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="twitter:title" content="use-did-update | Mantine"/><meta name="twitter:description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-did-update-09efaaceee1f1437.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-did-update</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in useEffect when value changes, but not when component mounts</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDidUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-did-update/use-did-update.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-did-update.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-did-update</code> hook works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code> but it is not called when component is mounted:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useDidUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-title function_">useDidUpdate</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Won&#x27;t be called when mounted&quot;</span>), [value]);
-}</code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDidUpdate</span>(<span class="hljs-params">fn: EffectCallback, dependencies?: <span class="hljs-built_in">any</span>[]</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-timeout"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-timeout</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-force-update"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-force-update</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-did-update","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-did-update/index.html b/hooks/use-did-update/index.html
new file mode 100644
index 00000000000..e0482e05f67
--- /dev/null
+++ b/hooks/use-did-update/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-did-update | Mantine</title><meta name="description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="og:title" content="use-did-update | Mantine"/><meta name="og:description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="twitter:title" content="use-did-update | Mantine"/><meta name="twitter:description" content="Calls function in useEffect when value changes, but not when component mounts"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-did-update-09efaaceee1f1437.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-did-update</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in useEffect when value changes, but not when component mounts</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDidUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-did-update/use-did-update.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-did-update.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-did-update</code> hook works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code> but it is not called when component is mounted:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useDidUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-title function_">useDidUpdate</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Won&#x27;t be called when mounted&quot;</span>), [value]);
+}</code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDidUpdate</span>(<span class="hljs-params">fn: EffectCallback, dependencies?: <span class="hljs-built_in">any</span>[]</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-timeout/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-timeout</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-force-update/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-force-update</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-did-update","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-disclosure.html b/hooks/use-disclosure/index.html
similarity index 50%
rename from hooks/use-disclosure.html
rename to hooks/use-disclosure/index.html
index 6a15c2ff222..fcf9375d8da 100644
--- a/hooks/use-disclosure.html
+++ b/hooks/use-disclosure/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-disclosure-9a81a9feadfe6ccb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-disclosure</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages boolean state and provides controls to toggle it</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-disclosure/use-disclosure.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-disclosure.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-disclosure-9a81a9feadfe6ccb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-disclosure</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages boolean state and provides controls to toggle it</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-disclosure/use-disclosure.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-disclosure.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-disclosure</code> hook manages boolean state. It provides <code class="m-b183c0a2 mantine-Code-root" dir="ltr">open</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">close</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">toggle</code> handlers
 and accepts optional <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onOpen</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onClose</code> callbacks. It can be used to manage controlled modals,
 popovers and other similar components:</p>
@@ -60,4 +60,4 @@
     <span class="hljs-attr">close</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
     <span class="hljs-attr">toggle</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   }
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-value"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-value</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-id"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-id</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-disclosure","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-debounced-value/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-debounced-value</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-id/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-id</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-disclosure","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-document-title.html b/hooks/use-document-title/index.html
similarity index 50%
rename from hooks/use-document-title.html
rename to hooks/use-document-title/index.html
index 2a6f05c6c57..f8c7bbbcd36 100644
--- a/hooks/use-document-title.html
+++ b/hooks/use-document-title/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-document-title-d205f2419c6eca40.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-document-title</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Sets document.title to given string</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDocumentTitle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-document-title/use-document-title.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-document-title.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-document-title-d205f2419c6eca40.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-document-title</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Sets document.title to given string</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDocumentTitle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-document-title/use-document-title.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-document-title.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-document-title</code> sets <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.title</code> property with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">React.useLayoutEffect</code> hook. Hook is not called during server side rendering.
 Use this hook with client only applications, for isomorphic use more advanced options, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/nfl/react-helmet">react-helmet</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Call hook with a string that should be set as document title inside any component.
@@ -23,4 +23,4 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDocumentTitle</span>(<span class="hljs-params">title: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-clipboard</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-visibility"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-visibility</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-document-title","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDocumentTitle</span>(<span class="hljs-params">title: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-clipboard/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-clipboard</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-visibility/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-visibility</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-document-title","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-document-visibility.html b/hooks/use-document-visibility/index.html
similarity index 50%
rename from hooks/use-document-visibility.html
rename to hooks/use-document-visibility/index.html
index e6dea4cb794..aa5a2b7d695 100644
--- a/hooks/use-document-visibility.html
+++ b/hooks/use-document-visibility/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-document-visibility-8fd8db06d182cdf5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-document-visibility</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if current tab is active</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDocumentVisibility } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-document-visibility/use-document-visibility.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-document-visibility.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-document-visibility-8fd8db06d182cdf5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-document-visibility</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if current tab is active</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useDocumentVisibility } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-document-visibility/use-document-visibility.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-document-visibility.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-document-visibility</code> hook returns current <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState">document.visibilityState</a>
 – it allows detecting if the current tab is active:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Switch to another tab to see document title change</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -15,4 +15,4 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>Switch to another tab to see document title change<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDocumentVisibility</span>(<span class="hljs-params"></span>): <span class="hljs-string">&#x27;visible&#x27;</span> | <span class="hljs-string">&#x27;hidden&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-title</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-eye-dropper"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-eye-dropper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-document-visibility","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useDocumentVisibility</span>(<span class="hljs-params"></span>): <span class="hljs-string">&#x27;visible&#x27;</span> | <span class="hljs-string">&#x27;hidden&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-title/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-title</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-eye-dropper/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-eye-dropper</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-document-visibility","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-element-size.html b/hooks/use-element-size/index.html
similarity index 52%
rename from hooks/use-element-size.html
rename to hooks/use-element-size/index.html
index 3f8ec1dd363..bf5e215a615 100644
--- a/hooks/use-element-size.html
+++ b/hooks/use-element-size/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-element-size-c702e63072750746.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-element-size</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns element width and height and subscribe to changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useElementSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-element-size/use-element-size.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-element-size.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-element-size-c702e63072750746.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-element-size</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns element width and height and subscribe to changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useElementSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-element-size/use-element-size.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-element-size.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-dimmed="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-bottom:calc(0.625rem * var(--mantine-scale));text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Resize textarea by dragging its right bottom corner</p><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><textarea aria-label="Resize me" style="width:calc(25rem * var(--mantine-scale));height:calc(7.5rem * var(--mantine-scale));border:none;background-color:var(--mantine-color-body);position:relative"></textarea></div><p style="margin-top:var(--mantine-spacing-sm);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Width: <!-- -->0<!-- -->, height: <!-- -->0</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useElementSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -18,7 +18,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="api" data-heading="API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#api">API</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-element-size</code> is a simpler version of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-resize-observer">use-resize-observer</a> hook.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-element-size</code> is a simpler version of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-resize-observer/">use-resize-observer</a> hook.
 Hook returns a <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code> object that should be passed to the observed element, and the element&#x27;s <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code>.
 On the first render (as well as during SSR), or when no element is being observed, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code> properties are equal to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">0</code>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> { ref, width, height } = <span class="hljs-title function_">useElementSize</span>();</code></pre></div></div></div></div>
@@ -27,4 +27,4 @@
   <span class="hljs-title class_">MutableRefObject</span>&lt;T&gt;,
   <span class="hljs-attr">width</span>: <span class="hljs-built_in">number</span>,
   <span class="hljs-attr">height</span>: <span class="hljs-built_in">number</span>
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-color-scheme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-color-scheme</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-event-listener"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-event-listener</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-element-size","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-color-scheme/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-color-scheme</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-event-listener/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-event-listener</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-element-size","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-event-listener.html b/hooks/use-event-listener/index.html
similarity index 51%
rename from hooks/use-event-listener.html
rename to hooks/use-event-listener/index.html
index 3108372bda2..dbac5994d01 100644
--- a/hooks/use-event-listener.html
+++ b/hooks/use-event-listener/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-event-listener-add2decb0f0ef2dd.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-event-listener</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Subscribes to events with a ref</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useEventListener } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-event-listener/use-event-listener.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-event-listener.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-event-listener-add2decb0f0ef2dd.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-event-listener</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Subscribes to events with a ref</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useEventListener } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-event-listener/use-event-listener.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-event-listener.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-event-listener</code> adds a given event listener to an element to which <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code> is assigned.
 Hook supports the same options as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">addEventListener</code> method.
 After the component is unmounted, the listener is automatically removed.</p>
@@ -22,4 +22,4 @@
   <span class="hljs-attr">type</span>: K,
   <span class="hljs-attr">listener</span>: <span class="hljs-function">(<span class="hljs-params"><span class="hljs-variable language_">this</span>: HTMLDivElement, ev: HTMLElementEventMap[K]</span>) =&gt;</span> <span class="hljs-built_in">any</span>,
   options?: <span class="hljs-built_in">boolean</span> | <span class="hljs-title class_">AddEventListenerOptions</span>
-): <span class="hljs-title class_">MutableRefObject</span>&lt;T&gt;;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-element-size"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-element-size</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-return"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-return</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-event-listener","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+): <span class="hljs-title class_">MutableRefObject</span>&lt;T&gt;;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-element-size/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-element-size</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-return/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-return</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-event-listener","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-eye-dropper.html b/hooks/use-eye-dropper/index.html
similarity index 52%
rename from hooks/use-eye-dropper.html
rename to hooks/use-eye-dropper/index.html
index 7941ebe6717..fd042469dcd 100644
--- a/hooks/use-eye-dropper.html
+++ b/hooks/use-eye-dropper/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-eye-dropper-e6297428dc9e25ac.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-eye-dropper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick color from any pixel on the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useEyeDropper } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-eye-dropper/use-eye-dropper.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-eye-dropper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-eye-dropper-e6297428dc9e25ac.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-eye-dropper</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Pick color from any pixel on the screen</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useEyeDropper } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-eye-dropper/use-eye-dropper.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-eye-dropper.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-eye-dropper</code> hook provides an interface to work with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API">EyeDropper API</a>.
 Check <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://caniuse.com/mdn-api_eyedropper">browser support</a> to learn which browsers support the API.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">EyeDropper API is not supported in your browser</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
@@ -50,4 +50,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useEyeDropper</span>(<span class="hljs-params"></span>): {
   <span class="hljs-attr">supported</span>: <span class="hljs-built_in">boolean</span>;
   <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">options?: { signal?: AbortSignal }</span>) =&gt;</span> <span class="hljs-title class_">Promise</span>&lt;{ <span class="hljs-attr">sRGBHex</span>: <span class="hljs-built_in">string</span> }&gt;;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-visibility"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-visibility</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-favicon"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-favicon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-eye-dropper","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-document-visibility/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-document-visibility</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-favicon/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-favicon</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-eye-dropper","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-favicon.html b/hooks/use-favicon/index.html
similarity index 51%
rename from hooks/use-favicon.html
rename to hooks/use-favicon/index.html
index 103d431f83c..58a9ae66ee4 100644
--- a/hooks/use-favicon.html
+++ b/hooks/use-favicon/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-favicon-22724936dbdfc3df.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-favicon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Changes favicon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFavicon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-favicon/use-favicon.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-favicon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-favicon-22724936dbdfc3df.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-favicon</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Changes favicon</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFavicon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-favicon/use-favicon.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-favicon.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-favicon</code> appends <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;link /&gt;</code> element to head component with given favicon in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useLayoutEffect</code>.
 The hook is not called during server side rendering.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Call hook with a favicon URL (supported formats: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.ico</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.png</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.svg</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.gif</code>) that should be set as favicon.
@@ -27,4 +27,4 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFavicon</span>(<span class="hljs-params">url: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-eye-dropper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-eye-dropper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hash"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hash</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-favicon","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFavicon</span>(<span class="hljs-params">url: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-eye-dropper/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-eye-dropper</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hash/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hash</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-favicon","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-focus-return.html b/hooks/use-focus-return/index.html
similarity index 53%
rename from hooks/use-focus-return.html
rename to hooks/use-focus-return/index.html
index 79a03edf5b8..a2b7925f207 100644
--- a/hooks/use-focus-return.html
+++ b/hooks/use-focus-return/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-return-2288497a7a230eb3.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-return</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Captures last focused element on the page and returns focus to it once the condition is met</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusReturn } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-return/use-focus-return.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-return.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-return-2288497a7a230eb3.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-return</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Captures last focused element on the page and returns focus to it once the condition is met</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusReturn } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-return/use-focus-return.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-return.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-focus-return</code> automatically returns focus to the last focused element when a given condition is met.
-For example, it is used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> component to restore focus after the modal was closed.</p>
+For example, it is used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> component to restore focus after the modal was closed.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Close the modal with the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Escape</code> key and see how focus returns to the button after the modal closes:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open modal</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useDisclosure } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Modal</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -23,7 +23,7 @@
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">In most cases, you should use this hook with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap">use-focus-trap</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">In most cases, you should use this hook with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap/">use-focus-trap</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-title function_">useFocusReturn</span>({
   <span class="hljs-comment">// Is region with focus trap active?</span>
   <span class="hljs-comment">// When it activates hook saves document.activeElement to the internal state</span>
@@ -42,4 +42,4 @@
 <span class="hljs-comment">// ... later</span>
 <span class="hljs-title function_">returnFocus</span>();</code></pre></div></div></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFocusReturn</span>(<span class="hljs-params">options: { opened: <span class="hljs-built_in">boolean</span>; shouldReturnFocus?: <span class="hljs-built_in">boolean</span> }</span>): <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-event-listener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-event-listener</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-trap"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-trap</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-return","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFocusReturn</span>(<span class="hljs-params">options: { opened: <span class="hljs-built_in">boolean</span>; shouldReturnFocus?: <span class="hljs-built_in">boolean</span> }</span>): <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-event-listener/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-event-listener</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-trap/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-trap</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-return","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-focus-trap.html b/hooks/use-focus-trap/index.html
similarity index 54%
rename from hooks/use-focus-trap.html
rename to hooks/use-focus-trap/index.html
index f9d16e8d562..a7abfc5f2cb 100644
--- a/hooks/use-focus-trap.html
+++ b/hooks/use-focus-trap/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-trap-32fc5ea080ae67af.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-trap</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Traps focus inside given node</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusTrap } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-trap/use-focus-trap.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-trap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-trap-32fc5ea080ae67af.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-trap</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Traps focus inside given node</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusTrap } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-trap/use-focus-trap.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-trap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-focus-trap</code> 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.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusTrap } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -32,7 +32,7 @@
 <span class="hljs-comment">// With Mantine component:</span>
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Paper</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{focusTrapRef}</span> /&gt;</span></span></code></pre></div></div></div></div>
 <div id="combine-with-other-ref-based-hooks" data-heading="Combine with other ref based hooks" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#combine-with-other-ref-based-hooks">Combine with other ref based hooks</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To combine <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-focus-trap</code> with other ref based hooks, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-merged-ref">use-merged-ref</a> hook:</p>
+<p class="MdxTypography_paragraph__Lp7wh">To combine <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-focus-trap</code> with other ref based hooks, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-merged-ref/">use-merged-ref</a> hook:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useClickOutside, useFocusTrap, useMergedRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -62,4 +62,4 @@
   );
 }</code></pre></div></div></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFocusTrap</span>(<span class="hljs-params">active?: <span class="hljs-built_in">boolean</span></span>): <span class="hljs-function">(<span class="hljs-params">instance: HTMLElement</span>) =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-return"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-return</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-within"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-within</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-trap","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useFocusTrap</span>(<span class="hljs-params">active?: <span class="hljs-built_in">boolean</span></span>): <span class="hljs-function">(<span class="hljs-params">instance: HTMLElement</span>) =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-return/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-return</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-within/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-within</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-trap","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-focus-within.html b/hooks/use-focus-within/index.html
similarity index 52%
rename from hooks/use-focus-within.html
rename to hooks/use-focus-within/index.html
index afcb45cbdf5..c631acbb23e 100644
--- a/hooks/use-focus-within.html
+++ b/hooks/use-focus-within/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-within-4b258234dbf7f56f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-within</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if any element within other element has focus</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusWithin } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-within/use-focus-within.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-within.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-focus-within-4b258234dbf7f56f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-focus-within</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if any element within other element has focus</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFocusWithin } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-focus-within/use-focus-within.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-focus-within.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-focus-within</code> hook detects if any element within the other element has focus.
 It works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:focus-within</code> CSS selector:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div><div style="background-color:transparent;padding:var(--mantine-spacing-xl)" class=""><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">One of elements has focus: <!-- -->false</p><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1balbblu6" id="mantine-R1balbblu6-label">Focus this input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Styles will be added to parent" aria-invalid="false" id="mantine-R1balbblu6"/></div></div><button style="margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useFocusWithin } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -34,4 +34,4 @@
 }): {
   <span class="hljs-attr">ref</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">MutableRefObject</span>&lt;T&gt;;
   <span class="hljs-attr">focused</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-trap"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-trap</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-fullscreen"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-fullscreen</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-within","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-trap/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-trap</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-fullscreen/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-fullscreen</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-focus-within","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-force-update.html b/hooks/use-force-update.html
deleted file mode 100644
index 61a2fd0828c..00000000000
--- a/hooks/use-force-update.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-force-update | Mantine</title><meta name="description" content="Force component to rerender without state change"/><meta name="og:title" content="use-force-update | Mantine"/><meta name="og:description" content="Force component to rerender without state change"/><meta name="twitter:title" content="use-force-update | Mantine"/><meta name="twitter:description" content="Force component to rerender without state change"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-force-update-72423505c6753afb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-force-update</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Force component to rerender without state change</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useForceUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-force-update/use-force-update.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-force-update.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-force-update</code> returns a function, which when called rerenders the component:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">mantine-kqbc8b3ze</p><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Force update</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-<span class="hljs-keyword">import</span> { useForceUpdate, randomId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> forceUpdate = <span class="hljs-title function_">useForceUpdate</span>();
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{randomId()}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{forceUpdate}</span>&gt;</span>Force update<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useForceUpdate</span>(<span class="hljs-params"></span>): <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-did-update"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-did-update</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-isomorphic-effect"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-isomorphic-effect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-force-update","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-force-update/index.html b/hooks/use-force-update/index.html
new file mode 100644
index 00000000000..eb6c1af61f2
--- /dev/null
+++ b/hooks/use-force-update/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-force-update | Mantine</title><meta name="description" content="Force component to rerender without state change"/><meta name="og:title" content="use-force-update | Mantine"/><meta name="og:description" content="Force component to rerender without state change"/><meta name="twitter:title" content="use-force-update | Mantine"/><meta name="twitter:description" content="Force component to rerender without state change"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-force-update-72423505c6753afb.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-force-update</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Force component to rerender without state change</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useForceUpdate } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-force-update/use-force-update.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-force-update.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-force-update</code> returns a function, which when called rerenders the component:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">mantine-wmunloe1g</p><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Force update</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+<span class="hljs-keyword">import</span> { useForceUpdate, randomId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> forceUpdate = <span class="hljs-title function_">useForceUpdate</span>();
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Group</span> <span class="hljs-attr">justify</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{randomId()}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{forceUpdate}</span>&gt;</span>Force update<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useForceUpdate</span>(<span class="hljs-params"></span>): <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-did-update/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-did-update</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-isomorphic-effect/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-isomorphic-effect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-force-update","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-fullscreen.html b/hooks/use-fullscreen/index.html
similarity index 56%
rename from hooks/use-fullscreen.html
rename to hooks/use-fullscreen/index.html
index 859364633c9..bbdba7483d4 100644
--- a/hooks/use-fullscreen.html
+++ b/hooks/use-fullscreen/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-fullscreen-f7e6b3248e9b038e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-fullscreen</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Enter/exit fullscreen mode</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFullscreen } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-fullscreen/use-fullscreen.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-fullscreen.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-fullscreen-f7e6b3248e9b038e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-fullscreen</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Enter/exit fullscreen mode</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useFullscreen } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-fullscreen/use-fullscreen.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-fullscreen.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-fullscreen</code> allows to enter/exit fullscreen for given element using the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a>.
 By default, if you don&#x27;t provide <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code>, the hook will target <code class="m-b183c0a2 mantine-Code-root" dir="ltr">document.documentElement</code>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:var(--mantine-color-blue-filled);--button-hover:var(--mantine-color-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Enter Fullscreen</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useFullscreen } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -46,4 +46,4 @@
   <span class="hljs-keyword">readonly</span> <span class="hljs-attr">ref</span>: <span class="hljs-function">(<span class="hljs-params">element: T | <span class="hljs-literal">null</span></span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-keyword">readonly</span> <span class="hljs-attr">toggle</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-built_in">void</span>&gt;;
   <span class="hljs-keyword">readonly</span> <span class="hljs-attr">fullscreen</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-within"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-within</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hotkeys"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hotkeys</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-fullscreen","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-focus-within/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-focus-within</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hotkeys/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hotkeys</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-fullscreen","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-hash.html b/hooks/use-hash/index.html
similarity index 51%
rename from hooks/use-hash.html
rename to hooks/use-hash/index.html
index f8409f80602..d1125c0cff1 100644
--- a/hooks/use-hash.html
+++ b/hooks/use-hash/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hash-8ba8b4f10370c000.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hash</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Get and set hash value in url</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHash } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hash/use-hash.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hash.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hash-8ba8b4f10370c000.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hash</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Get and set hash value in url</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHash } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hash/use-hash.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hash.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-hash</code> returns hash from URL, subscribes to its changes with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event">hashchange event</a>
 and allows changing it with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">setHash</code> function:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Set hash to random string</span></span></button></div><p style="margin-top:var(--mantine-spacing-md);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Current hash: <code class="m-b183c0a2 mantine-Code-root" dir="ltr"></code></p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useHash, randomId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -19,4 +19,4 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useHash</span>(<span class="hljs-params"></span>): <span class="hljs-keyword">readonly</span> [<span class="hljs-built_in">string</span>, <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-built_in">string</span></span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-favicon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-favicon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-headroom"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-headroom</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hash","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useHash</span>(<span class="hljs-params"></span>): <span class="hljs-keyword">readonly</span> [<span class="hljs-built_in">string</span>, <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-built_in">string</span></span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-favicon/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-favicon</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-headroom/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-headroom</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hash","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-headroom.html b/hooks/use-headroom/index.html
similarity index 51%
rename from hooks/use-headroom.html
rename to hooks/use-headroom/index.html
index 50ce8549c12..2b1aefcfea3 100644
--- a/hooks/use-headroom.html
+++ b/hooks/use-headroom/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-headroom-fb83e02d2553a017.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-headroom</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Create headers that are hidden after user scrolls past given distance</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHeadroom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-headroom/use-headroom.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-headroom.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-headroom-fb83e02d2553a017.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-headroom</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Create headers that are hidden after user scrolls past given distance</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHeadroom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-headroom/use-headroom.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-headroom.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-headroom</code> 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 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">true</code> when the current scroll position is less than the specified <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fixedAt</code> value and
@@ -51,4 +51,4 @@
 
   /** Called when element is unpinned */
   onRelease?(): <span class="hljs-built_in">void</span>;
-}</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hash"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hash</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-idle"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-idle</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-headroom","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hash/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hash</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-idle/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-idle</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-headroom","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-hotkeys.html b/hooks/use-hotkeys/index.html
similarity index 56%
rename from hooks/use-hotkeys.html
rename to hooks/use-hotkeys/index.html
index 278769eddb8..6110a314e56 100644
--- a/hooks/use-hotkeys.html
+++ b/hooks/use-hotkeys/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hotkeys-7e0da88c9121f7d9.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hotkeys</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Listen for keys combinations on document element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHotkeys } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hotkeys.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hotkeys-7e0da88c9121f7d9.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hotkeys</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Listen for keys combinations on document element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHotkeys } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hotkeys/use-hotkeys.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hotkeys.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-hotkeys</code> accepts as its first argument an array of hotkeys and handler tuples:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">hotkey</code> - hotkey string, for example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ctrl+E</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">shift+alt+L</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mod+S</code></li>
@@ -82,4 +82,4 @@
     ]
   &gt;,
   tagsToIgnore?: <span class="hljs-built_in">string</span>[]
-</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-fullscreen"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-fullscreen</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hover"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hover</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hotkeys","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-fullscreen/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-fullscreen</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hover/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hover</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hotkeys","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-hover.html b/hooks/use-hover/index.html
similarity index 50%
rename from hooks/use-hover.html
rename to hooks/use-hover/index.html
index e5316fc3c8e..8cd703ed847 100644
--- a/hooks/use-hover.html
+++ b/hooks/use-hover/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hover-47e5ac0bde18483d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hover</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if element is hovered</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHover } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hover/use-hover.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hover.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-hover-47e5ac0bde18483d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-hover</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if element is hovered</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useHover } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-hover/use-hover.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-hover.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="height:calc(3.75rem * var(--mantine-scale));background-color:var(--mantine-color-blue-light);display:flex;align-items:center;justify-content:center"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Put mouse over me please</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useHover } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -18,4 +18,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useHover&lt;T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">HTMLElement</span> = <span class="hljs-title class_">HTMLDivElement</span>&gt;(): {
   <span class="hljs-attr">ref</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">MutableRefObject</span>&lt;T&gt;;
   <span class="hljs-attr">hovered</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hotkeys"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hotkeys</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-intersection"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-intersection</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hover","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hotkeys/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hotkeys</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-intersection/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-intersection</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-hover","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-id.html b/hooks/use-id.html
deleted file mode 100644
index c450f43b758..00000000000
--- a/hooks/use-id.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-id | Mantine</title><meta name="description" content="Generates memoized random id"/><meta name="og:title" content="use-id | Mantine"/><meta name="og:description" content="Generates memoized random id"/><meta name="twitter:title" content="use-id | Mantine"/><meta name="twitter:description" content="Generates memoized random id"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-id-694117ad3971c61e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-id</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Generates memoized random id</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-id/use-id.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-id.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-id</code> 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.</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Input</span>(<span class="hljs-params">{ id }: { id?: <span class="hljs-built_in">string</span> }</span>) {
-  <span class="hljs-keyword">const</span> uuid = <span class="hljs-title function_">useId</span>(id);
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">{uuid}</span>&gt;</span>Input label<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{uuid}</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}
-
-<span class="hljs-comment">// input and label will have id &#x27;my-id&#x27;</span>
-<span class="hljs-keyword">const</span> withId = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;my-id&quot;</span> /&gt;</span></span>;
-
-<span class="hljs-comment">// input and label will have random id &#x27;mantine-fZMoF&#x27;</span>
-<span class="hljs-keyword">const</span> withoutId = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Input</span> /&gt;</span></span>;</code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useId</span>(<span class="hljs-params">id: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">string</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-disclosure"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-disclosure</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-input-state"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-input-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-id","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-id/index.html b/hooks/use-id/index.html
new file mode 100644
index 00000000000..27338115473
--- /dev/null
+++ b/hooks/use-id/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-id | Mantine</title><meta name="description" content="Generates memoized random id"/><meta name="og:title" content="use-id | Mantine"/><meta name="og:description" content="Generates memoized random id"/><meta name="twitter:title" content="use-id | Mantine"/><meta name="twitter:description" content="Generates memoized random id"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-id-694117ad3971c61e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-id</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Generates memoized random id</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-id/use-id.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-id.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-id</code> 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.</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useId } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Input</span>(<span class="hljs-params">{ id }: { id?: <span class="hljs-built_in">string</span> }</span>) {
+  <span class="hljs-keyword">const</span> uuid = <span class="hljs-title function_">useId</span>(id);
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">{uuid}</span>&gt;</span>Input label<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{uuid}</span> /&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}
+
+<span class="hljs-comment">// input and label will have id &#x27;my-id&#x27;</span>
+<span class="hljs-keyword">const</span> withId = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;my-id&quot;</span> /&gt;</span></span>;
+
+<span class="hljs-comment">// input and label will have random id &#x27;mantine-fZMoF&#x27;</span>
+<span class="hljs-keyword">const</span> withoutId = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Input</span> /&gt;</span></span>;</code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useId</span>(<span class="hljs-params">id: <span class="hljs-built_in">string</span></span>): <span class="hljs-built_in">string</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-disclosure/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-disclosure</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-input-state/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-input-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-id","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-idle.html b/hooks/use-idle/index.html
similarity index 57%
rename from hooks/use-idle.html
rename to hooks/use-idle/index.html
index e957c28b22c..e41fe96683d 100644
--- a/hooks/use-idle.html
+++ b/hooks/use-idle/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-idle-b8a11ed995863537.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-idle</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if user does nothing on page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIdle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-idle/use-idle.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-idle.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-idle-b8a11ed995863537.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-idle</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if user does nothing on page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIdle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-idle/use-idle.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-idle.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-idle</code> detects if user does nothing for a given time in ms:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--badge-bg:var(--mantine-color-blue-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="m-347db0ec mantine-Badge-root"><span class="m-5add502a mantine-Badge-label">Current state: <!-- -->idle</span></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useIdle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -36,4 +36,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useIdle</span>(<span class="hljs-params">
   timeout: <span class="hljs-built_in">number</span>,
   options?: Partial&lt;{ events: <span class="hljs-built_in">string</span>[]; initialState: <span class="hljs-built_in">boolean</span> }&gt;
-</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-headroom"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-headroom</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-interval"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-interval</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-idle","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-headroom/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-headroom</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-interval/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-interval</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-idle","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-input-state.html b/hooks/use-input-state.html
deleted file mode 100644
index 6e6a45b34e6..00000000000
--- a/hooks/use-input-state.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-input-state | Mantine</title><meta name="description" content="Manages input state"/><meta name="og:title" content="use-input-state | Mantine"/><meta name="og:description" content="Manages input state"/><meta name="twitter:title" content="use-input-state | Mantine"/><meta name="twitter:description" content="Manages input state"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-input-state-9b37edeb205fd501.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-input-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages input state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useInputState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-input-state/use-input-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-input-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-input-state</code> handles state of native inputs (with event in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onChange</code> handler) and custom inputs (with value in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onChange</code> handler).
-Hook works with all Mantine and native inputs:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
-<span class="hljs-keyword">import</span> { useInputState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">WithUseInputState</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> [stringValue, setStringValue] = <span class="hljs-title function_">useInputState</span>(<span class="hljs-string">&#x27;&#x27;</span>);
-  <span class="hljs-keyword">const</span> [numberValue, setNumberValue] = <span class="hljs-title function_">useInputState</span>(<span class="hljs-number">0</span>);
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setStringValue}</span> /&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setStringValue}</span> /&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{numberValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setNumberValue}</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">WithUseState</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> [stringValue, setStringValue] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;&#x27;</span>);
-  <span class="hljs-keyword">const</span> [numberValue, setNumberValue] = <span class="hljs-title function_">useState</span>(<span class="hljs-number">0</span>);
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
-        <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
-        <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span>
-        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> setStringValue(event.currentTarget.value)}
-      /&gt;
-      <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span>
-        <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span>
-        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> setStringValue(event.currentTarget.value)}
-      /&gt;
-      <span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{numberValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setNumberValue}</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useInputState&lt;T&gt;(
-  <span class="hljs-attr">initialState</span>: T
-): [T, <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-literal">null</span> | <span class="hljs-literal">undefined</span> | T | React.ChangeEvent&lt;<span class="hljs-built_in">any</span>&gt;</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-id"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-id</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-list-state"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-list-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-input-state","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-input-state/index.html b/hooks/use-input-state/index.html
new file mode 100644
index 00000000000..a7e8f88bcdc
--- /dev/null
+++ b/hooks/use-input-state/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-input-state | Mantine</title><meta name="description" content="Manages input state"/><meta name="og:title" content="use-input-state | Mantine"/><meta name="og:description" content="Manages input state"/><meta name="twitter:title" content="use-input-state | Mantine"/><meta name="twitter:description" content="Manages input state"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-input-state-9b37edeb205fd501.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-input-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages input state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useInputState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-input-state/use-input-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-input-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-input-state</code> handles state of native inputs (with event in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onChange</code> handler) and custom inputs (with value in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">onChange</code> handler).
+Hook works with all Mantine and native inputs:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<span class="hljs-keyword">import</span> { useInputState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">NumberInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">WithUseInputState</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> [stringValue, setStringValue] = <span class="hljs-title function_">useInputState</span>(<span class="hljs-string">&#x27;&#x27;</span>);
+  <span class="hljs-keyword">const</span> [numberValue, setNumberValue] = <span class="hljs-title function_">useInputState</span>(<span class="hljs-number">0</span>);
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setStringValue}</span> /&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setStringValue}</span> /&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{numberValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setNumberValue}</span> /&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">WithUseState</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> [stringValue, setStringValue] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;&#x27;</span>);
+  <span class="hljs-keyword">const</span> [numberValue, setNumberValue] = <span class="hljs-title function_">useState</span>(<span class="hljs-number">0</span>);
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
+        <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
+        <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span>
+        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> setStringValue(event.currentTarget.value)}
+      /&gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span>
+        <span class="hljs-attr">value</span>=<span class="hljs-string">{stringValue}</span>
+        <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> setStringValue(event.currentTarget.value)}
+      /&gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">NumberInput</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{numberValue}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{setNumberValue}</span> /&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useInputState&lt;T&gt;(
+  <span class="hljs-attr">initialState</span>: T
+): [T, <span class="hljs-function">(<span class="hljs-params">value: <span class="hljs-literal">null</span> | <span class="hljs-literal">undefined</span> | T | React.ChangeEvent&lt;<span class="hljs-built_in">any</span>&gt;</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-id/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-id</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-list-state/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-list-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-input-state","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-intersection.html b/hooks/use-intersection/index.html
similarity index 55%
rename from hooks/use-intersection.html
rename to hooks/use-intersection/index.html
index 865f6b7892f..4406ea4b2e7 100644
--- a/hooks/use-intersection.html
+++ b/hooks/use-intersection/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-intersection-71e56d31d6ed4af8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-intersection</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if element is visible in viewport</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIntersection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-intersection/use-intersection.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-intersection.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-intersection-71e56d31d6ed4af8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-intersection</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if element is visible in viewport</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIntersection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-intersection/use-intersection.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-intersection.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-intersection</code> returns information about the intersection
 of a given element with its scroll container or body element with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="overflow-y:scroll;height:calc(18.75rem * var(--mantine-scale))" class="m-1b7284a3 mantine-Paper-root"><div style="padding-top:calc(16.25rem * var(--mantine-scale));padding-bottom:calc(17.5rem * var(--mantine-scale))" class=""><div style="background-color:var(--mantine-color-red-6);min-width:50%;padding:var(--mantine-spacing-xl)" class="m-1b7284a3 mantine-Paper-root"><p style="color:#fff;font-weight:700" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Obscured</p></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
@@ -61,4 +61,4 @@
 ): {
   <span class="hljs-attr">ref</span>: <span class="hljs-function">(<span class="hljs-params">element: T | <span class="hljs-literal">null</span></span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">entry</span>: <span class="hljs-title class_">IntersectionObserverEntry</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hover"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hover</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-media-query"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-media-query</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-intersection","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-hover/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-hover</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-media-query/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-media-query</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-intersection","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-interval.html b/hooks/use-interval/index.html
similarity index 53%
rename from hooks/use-interval.html
rename to hooks/use-interval/index.html
index 0f00db8f21c..b3634429350 100644
--- a/hooks/use-interval.html
+++ b/hooks/use-interval/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-interval-df9376227430ab78.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-interval</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in given interval</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useInterval } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-interval/use-interval.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-interval.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-interval-df9376227430ab78.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-interval</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in given interval</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useInterval } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-interval/use-interval.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-interval.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--stack-align:center" class="m-6d731127 mantine-Stack-root"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Page loaded <b>0</b> seconds ago</p><button style="--button-bg:transparent;--button-hover:var(--mantine-color-teal-outline-hover);--button-color:var(--mantine-color-teal-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-teal-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Start<!-- --> counting</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useInterval } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Stack</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -53,4 +53,4 @@
   <span class="hljs-attr">stop</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">toggle</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">active</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-idle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-idle</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-merged-ref"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-merged-ref</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-interval","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-idle/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-idle</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-merged-ref/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-merged-ref</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-interval","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-isomorphic-effect.html b/hooks/use-isomorphic-effect.html
deleted file mode 100644
index 1091ad1b633..00000000000
--- a/hooks/use-isomorphic-effect.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-isomorphic-effect | Mantine</title><meta name="description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="og:title" content="use-isomorphic-effect | Mantine"/><meta name="og:description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="twitter:title" content="use-isomorphic-effect | Mantine"/><meta name="twitter:description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-isomorphic-effect-480bc69564754df6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-isomorphic-effect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">useLayoutEffect that does not show warning when used in SSR</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIsomorphicEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-isomorphic-effect/use-isomorphic-effect.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-isomorphic-effect.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-isomorphic-effect</code> is a replacement for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code> hook that works in both browser and server environments.</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useIsomorphicEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-title function_">useIsomorphicEffect</span>(<span class="hljs-function">() =&gt;</span> {
-    <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span> = <span class="hljs-string">&#x27;title&#x27;</span>;
-  });
-
-  <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-force-update"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-force-update</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-logger"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-logger</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-isomorphic-effect","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-isomorphic-effect/index.html b/hooks/use-isomorphic-effect/index.html
new file mode 100644
index 00000000000..909231b2a39
--- /dev/null
+++ b/hooks/use-isomorphic-effect/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-isomorphic-effect | Mantine</title><meta name="description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="og:title" content="use-isomorphic-effect | Mantine"/><meta name="og:description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="twitter:title" content="use-isomorphic-effect | Mantine"/><meta name="twitter:description" content="useLayoutEffect that does not show warning when used in SSR"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-isomorphic-effect-480bc69564754df6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-isomorphic-effect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">useLayoutEffect that does not show warning when used in SSR</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useIsomorphicEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-isomorphic-effect/use-isomorphic-effect.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-isomorphic-effect.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-isomorphic-effect</code> is a replacement for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code> hook that works in both browser and server environments.</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useIsomorphicEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-title function_">useIsomorphicEffect</span>(<span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span> = <span class="hljs-string">&#x27;title&#x27;</span>;
+  });
+
+  <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-force-update/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-force-update</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-logger/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-logger</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-isomorphic-effect","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-list-state.html b/hooks/use-list-state/index.html
similarity index 60%
rename from hooks/use-list-state.html
rename to hooks/use-list-state/index.html
index a06107442fa..53d374b86b8 100644
--- a/hooks/use-list-state.html
+++ b/hooks/use-list-state/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-list-state-b336d42abddc60b3.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-list-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages array state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useListState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-list-state/use-list-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-list-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-list-state-b336d42abddc60b3.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-list-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages array state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useListState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-list-state/use-list-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-list-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-list-state</code> provides an API to work with list state:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> [values, handlers] = <span class="hljs-title function_">useListState</span>([{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }]);
 
@@ -143,4 +143,4 @@
 If you call the hook with an empty array, you must specify item type:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-title function_">useListState</span>([<span class="hljs-string">&#x27;hello&#x27;</span>]); <span class="hljs-comment">// ok, item type is string</span>
 <span class="hljs-title function_">useListState</span>([]); <span class="hljs-comment">// not ok, item type is any</span>
-useListState&lt;<span class="hljs-built_in">string</span>&gt;([]); <span class="hljs-comment">// ok, item type is string</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-input-state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-input-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-local-storage"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-local-storage</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-list-state","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+useListState&lt;<span class="hljs-built_in">string</span>&gt;([]); <span class="hljs-comment">// ok, item type is string</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-input-state/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-input-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-local-storage/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-local-storage</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-list-state","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-local-storage.html b/hooks/use-local-storage/index.html
similarity index 58%
rename from hooks/use-local-storage.html
rename to hooks/use-local-storage/index.html
index df301301b6f..34dfd9580a0 100644
--- a/hooks/use-local-storage.html
+++ b/hooks/use-local-storage/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-local-storage-5bd05f1496e68b35.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-local-storage</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Use localStorage value as react state, sync state across opened tabs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useLocalStorage } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-local-storage/use-local-storage.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-local-storage.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-local-storage-5bd05f1496e68b35.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-local-storage</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Use localStorage value as react state, sync state across opened tabs</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useLocalStorage } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-local-storage/use-local-storage.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-local-storage.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-local-storage</code> allows using value from the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">localStorage</code> as react state.
 The hook works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useState</code>, but also writes the value to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">localStorage</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useLocalStorage } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -116,4 +116,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> [value, setValue] = useLocalStorage&lt;<span class="hljs-string">&#x27;dark&#x27;</span> | <span class="hljs-string">&#x27;light&#x27;</span>&gt;({
   <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;color-scheme&#x27;</span>,
   <span class="hljs-attr">defaultValue</span>: <span class="hljs-string">&#x27;light&#x27;</span>,
-});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-list-state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-list-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-pagination"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-pagination</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-local-storage","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-list-state/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-list-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-pagination/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-pagination</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-local-storage","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-logger.html b/hooks/use-logger/index.html
similarity index 50%
rename from hooks/use-logger.html
rename to hooks/use-logger/index.html
index 442489fdfdd..18c9645bbe7 100644
--- a/hooks/use-logger.html
+++ b/hooks/use-logger/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-logger-ccffe95bbcba7589.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-logger</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Log given values to console when component renders</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useLogger } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-logger/use-logger.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-logger.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-logger-ccffe95bbcba7589.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-logger</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Log given values to console when component renders</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useLogger } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-logger/use-logger.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-logger.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-logger</code> logs given values to the console each time component renders.
 Open devtools to see state changes in console:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Update state (<!-- -->0<!-- -->)</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
@@ -16,4 +16,4 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> setCount((c) =&gt; c + 1)}&gt;Update state ({count})<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useLogger</span>(<span class="hljs-params">componentName: <span class="hljs-built_in">string</span>, props: <span class="hljs-built_in">any</span>[]</span>): <span class="hljs-built_in">any</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-isomorphic-effect"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-isomorphic-effect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-shallow-effect"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-shallow-effect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-logger","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useLogger</span>(<span class="hljs-params">componentName: <span class="hljs-built_in">string</span>, props: <span class="hljs-built_in">any</span>[]</span>): <span class="hljs-built_in">any</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-isomorphic-effect/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-isomorphic-effect</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-shallow-effect/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-shallow-effect</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-logger","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-media-query.html b/hooks/use-media-query/index.html
similarity index 52%
rename from hooks/use-media-query.html
rename to hooks/use-media-query/index.html
index 0e73d41f4a6..714babe895a 100644
--- a/hooks/use-media-query.html
+++ b/hooks/use-media-query/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-media-query-8de0c29783d41868.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-media-query</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Subscribes to media queries with window.matchMedia</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMediaQuery } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-media-query/use-media-query.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-media-query.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-media-query-8de0c29783d41868.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-media-query</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Subscribes to media queries with window.matchMedia</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMediaQuery } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-media-query/use-media-query.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-media-query.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-media-query</code> subscribes to media queries.
 It receives a media query as an argument and returns <code class="m-b183c0a2 mantine-Code-root" dir="ltr">true</code> if the given media query matches the current state.
 The hook relies on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">window.matchMedia()</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">API</a>
@@ -37,4 +37,4 @@
   options?: {
     getInitialValueInEffect: <span class="hljs-built_in">boolean</span>;
   }
-</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-intersection"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-intersection</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-mouse"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-mouse</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-media-query","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-intersection/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-intersection</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-mouse/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-mouse</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-media-query","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-merged-ref.html b/hooks/use-merged-ref/index.html
similarity index 51%
rename from hooks/use-merged-ref.html
rename to hooks/use-merged-ref/index.html
index 03ccda6538a..b41051edf63 100644
--- a/hooks/use-merged-ref.html
+++ b/hooks/use-merged-ref/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-merged-ref-1ee247cf1271bf95.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-merged-ref</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Merges multiple refs into one</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMergedRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-merged-ref/use-merged-ref.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-merged-ref.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-merged-ref-1ee247cf1271bf95.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-merged-ref</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Merges multiple refs into one</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMergedRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-merged-ref/use-merged-ref.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-merged-ref.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-merged-ref</code> accepts any number of refs and returns a function that should be passed to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ref</code> 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 <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-click-outside">use-click-outside</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap">use-focus-trap</a> hooks and also get a ref for yourself:</p>
+when you want to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-click-outside/">use-click-outside</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap/">use-focus-trap</a> hooks and also get a ref for yourself:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useClickOutside, useFocusTrap, useMergedRef } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -34,9 +34,9 @@
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">mergeRefs</code> works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-merged-ref</code>, but does not use hooks internally.
 Use it only when you cannot use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-merged-ref</code>. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mergeRefs</code> will not work
-correctly with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap">use-focus-trap</a> hook, you are required to
+correctly with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-focus-trap/">use-focus-trap</a> hook, you are required to
 use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-merged-ref</code> with it.</p>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useMergedRef&lt;T = <span class="hljs-built_in">any</span>&gt;(...<span class="hljs-attr">refs</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">ForwardedRef</span>&lt;T&gt;[]): <span class="hljs-function">(<span class="hljs-params">node: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div>
 <div id="set-node-type" data-heading="Set node type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-node-type">Set node type</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">useMergedRef&lt;<span class="hljs-title class_">HTMLDivElement</span>&gt;();</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-interval"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-interval</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-network"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-network</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-merged-ref","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">useMergedRef&lt;<span class="hljs-title class_">HTMLDivElement</span>&gt;();</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-interval/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-interval</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-network/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-network</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-merged-ref","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-mouse.html b/hooks/use-mouse/index.html
similarity index 56%
rename from hooks/use-mouse.html
rename to hooks/use-mouse/index.html
index 1b118635e07..81f586a5957 100644
--- a/hooks/use-mouse.html
+++ b/hooks/use-mouse/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-mouse-568687c99f8bdf26.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-mouse</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks mouse position over the viewport or given element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMouse } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-mouse/use-mouse.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-mouse.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-mouse-568687c99f8bdf26.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-mouse</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks mouse position over the viewport or given element</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMouse } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-mouse/use-mouse.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-mouse.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div style="background:var(--mantine-color-blue-light);width:calc(18.75rem * var(--mantine-scale));height:calc(11.25rem * var(--mantine-scale))" class=""></div></div><p style="margin-top:var(--mantine-spacing-sm);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Mouse coordinates <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{ x: 0, y: 0 }</code></p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Code</span>, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useMouse } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -51,4 +51,4 @@
   <span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>;
   <span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span>;
   <span class="hljs-attr">ref</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">MutableRefObject</span>&lt;T&gt;;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-media-query"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-media-query</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-move"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-move</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-mouse","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-media-query/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-media-query</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-move/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-move</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-mouse","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-move.html b/hooks/use-move/index.html
similarity index 66%
rename from hooks/use-move.html
rename to hooks/use-move/index.html
index 14910209573..9ef30787e9b 100644
--- a/hooks/use-move.html
+++ b/hooks/use-move/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-move-6c2302746de1b727.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-move</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Handles move behavior over any element, use to build custom sliders, color pickers, etc.</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMove } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-move/use-move.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-move.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-move-6c2302746de1b727.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-move</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Handles move behavior over any element, use to build custom sliders, color pickers, etc.</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useMove } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-move/use-move.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-move.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-move</code> handles move behavior over any element:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><div style="width:calc(25rem * var(--mantine-scale));height:calc(7.5rem * var(--mantine-scale));background-color:var(--mantine-color-blue-light);position:relative"><div style="position:absolute;left:calc(20% - calc(0.5rem * var(--mantine-scale)));top:calc(60% - calc(0.5rem * var(--mantine-scale)));width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));background-color:var(--mantine-color-blue-7)"></div></div></div><p style="margin-top:var(--mantine-spacing-sm);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Values <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{ x: 20, y: 60 }</code></p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Code</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -221,4 +221,4 @@
 ): {
   <span class="hljs-attr">ref</span>: <span class="hljs-title class_">MutableRefObject</span>&lt;T&gt;;
   <span class="hljs-attr">active</span>: <span class="hljs-built_in">boolean</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-mouse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-mouse</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-reduced-motion"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-reduced-motion</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-move","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-mouse/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-mouse</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-reduced-motion/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-reduced-motion</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-move","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-network.html b/hooks/use-network/index.html
similarity index 54%
rename from hooks/use-network.html
rename to hooks/use-network/index.html
index 466a63b0f44..1ea48d62662 100644
--- a/hooks/use-network.html
+++ b/hooks/use-network/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-network-c71ec4f75dbfd106.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-network</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current connection status</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useNetwork } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-network/use-network.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-network.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-network-c71ec4f75dbfd106.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-network</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current connection status</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useNetwork } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-network/use-network.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-network.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-network</code> hook returns an object with current connection status:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><table style="--table-layout:fixed;--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-right:auto;margin-left:auto;max-width:calc(18.75rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Property</th><th class="m-4e7aa4f3 mantine-Table-th">Value</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Online</td><td class="m-4e7aa4ef mantine-Table-td"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-teal-filled)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Online</p></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">rtt</td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">downlink</td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">effectiveType</td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">saveData</td><td class="m-4e7aa4ef mantine-Table-td"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-red-filled)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">false</p></td></tr></tbody></table></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Table</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useNetwork } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -68,4 +68,4 @@
   rtt?: <span class="hljs-built_in">number</span>;
   saveData?: <span class="hljs-built_in">boolean</span>;
   <span class="hljs-keyword">type</span>?: <span class="hljs-string">&#x27;bluetooth&#x27;</span> | <span class="hljs-string">&#x27;cellular&#x27;</span> | <span class="hljs-string">&#x27;ethernet&#x27;</span> | <span class="hljs-string">&#x27;wifi&#x27;</span> | <span class="hljs-string">&#x27;wimax&#x27;</span> | <span class="hljs-string">&#x27;none&#x27;</span> | <span class="hljs-string">&#x27;other&#x27;</span> | <span class="hljs-string">&#x27;unknown&#x27;</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-merged-ref"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-merged-ref</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-os"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-os</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-network","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-merged-ref/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-merged-ref</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-os/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-os</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-network","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-os.html b/hooks/use-os/index.html
similarity index 51%
rename from hooks/use-os.html
rename to hooks/use-os/index.html
index f60a01c3730..00e5141153b 100644
--- a/hooks/use-os.html
+++ b/hooks/use-os/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-os-a559b776eaff431d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-os</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects user operating system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useOs } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-os/use-os.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-os.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-os-a559b776eaff431d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-os</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects user operating system</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useOs } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-os/use-os.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-os.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-os</code> returns user&#x27;s os. Possible values are: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">undetermined</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">macos</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ios</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">windows</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">android</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">linux</code>.
 If the OS cannot be identified, for example, during server side rendering <code class="m-b183c0a2 mantine-Code-root" dir="ltr">undetermined</code> will be returned.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Your os is <b>undetermined</b></p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useOs } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -19,4 +19,4 @@
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getOS</span>(<span class="hljs-params">options?: {
   getValueInEffect: <span class="hljs-built_in">boolean</span>;
-}</span>): <span class="hljs-string">&#x27;undetermined&#x27;</span> | <span class="hljs-string">&#x27;macos&#x27;</span> | <span class="hljs-string">&#x27;ios&#x27;</span> | <span class="hljs-string">&#x27;windows&#x27;</span> | <span class="hljs-string">&#x27;android&#x27;</span> | <span class="hljs-string">&#x27;linux&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-network"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-network</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-page-leave"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-page-leave</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-os","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</span>): <span class="hljs-string">&#x27;undetermined&#x27;</span> | <span class="hljs-string">&#x27;macos&#x27;</span> | <span class="hljs-string">&#x27;ios&#x27;</span> | <span class="hljs-string">&#x27;windows&#x27;</span> | <span class="hljs-string">&#x27;android&#x27;</span> | <span class="hljs-string">&#x27;linux&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-network/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-network</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-page-leave/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-page-leave</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-os","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-page-leave.html b/hooks/use-page-leave/index.html
similarity index 50%
rename from hooks/use-page-leave.html
rename to hooks/use-page-leave/index.html
index c2b69c79fae..0e1302b5b12 100644
--- a/hooks/use-page-leave.html
+++ b/hooks/use-page-leave/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-page-leave-90fb520af0bb8d85.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-page-leave</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls given function when mouse leaves the page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePageLeave } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-page-leave/use-page-leave.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-page-leave.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-page-leave-90fb520af0bb8d85.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-page-leave</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls given function when mouse leaves the page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePageLeave } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-page-leave/use-page-leave.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-page-leave.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-page-leave</code> calls given function when mouse leaves the page:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Mouse left the page <!-- -->0<!-- --> times</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { usePageLeave } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -14,4 +14,4 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>Mouse left the page {leftsCount} times<span class="hljs-tag">&lt;/&gt;</span></span>;
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">usePageLeave</span>(<span class="hljs-params">onPageLeave: () =&gt; <span class="hljs-built_in">void</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-os"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-os</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-text-selection"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-text-selection</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-page-leave","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">usePageLeave</span>(<span class="hljs-params">onPageLeave: () =&gt; <span class="hljs-built_in">void</span></span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-os/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-os</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-text-selection/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-text-selection</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-page-leave","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-pagination.html b/hooks/use-pagination/index.html
similarity index 67%
rename from hooks/use-pagination.html
rename to hooks/use-pagination/index.html
index 965acf69d43..b2641245ba4 100644
--- a/hooks/use-pagination.html
+++ b/hooks/use-pagination/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-pagination-3b99ca7c5e4530f9.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-pagination</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages pagination state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePagination } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-pagination/use-pagination.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-pagination.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-pagination</code> is a state management hook for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pagination">Pagination</a> component,
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-pagination-3b99ca7c5e4530f9.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-pagination</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages pagination state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePagination } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-pagination/use-pagination.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-pagination.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-pagination</code> is a state management hook for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/pagination/">Pagination</a> component,
 it manages pagination with controlled and uncontrolled state:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4addd315 mantine-Pagination-root"><div style="--group-gap:calc(0.5rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-disabled="true" type="button" disabled=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z" fill="currentColor"></path></svg></button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-active="true" data-with-padding="true" type="button" aria-current="page">1</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">2</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">3</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">4</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">5</button><div class="m-4ad7767d mantine-Pagination-dots"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z" fill="currentColor"></path></svg></div><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" data-with-padding="true" type="button">10</button><button class="mantine-focus-auto mantine-active m-326d024a mantine-Pagination-control m-87cf2631 mantine-UnstyledButton-root" type="button"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="width:calc(var(--pagination-control-size) / 1.8);height:calc(var(--pagination-control-size) / 1.8)"><path d="M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z" fill="currentColor"></path></svg></button></div></div></div></div></div>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> pagination = <span class="hljs-title function_">usePagination</span>({ <span class="hljs-attr">total</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">initialPage</span>: <span class="hljs-number">1</span> });
@@ -100,4 +100,4 @@
   <span class="hljs-attr">previous</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">first</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">last</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-local-storage"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-local-storage</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-previous"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-previous</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-pagination","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-local-storage/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-local-storage</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-previous/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-previous</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-pagination","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-previous.html b/hooks/use-previous/index.html
similarity index 50%
rename from hooks/use-previous.html
rename to hooks/use-previous/index.html
index d179d843d76..4b34af64c25 100644
--- a/hooks/use-previous.html
+++ b/hooks/use-previous/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-previous-ec274840b068eda0.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-previous</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns previous value of given state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePrevious } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-previous/use-previous.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-previous.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-previous-ec274840b068eda0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-previous</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns previous value of given state</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { usePrevious } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-previous/use-previous.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-previous.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-previous</code> stores the previous value of a state in a ref.
 IT returns <code class="m-b183c0a2 mantine-Code-root" dir="ltr">undefined</code> on initial render and the previous value of a state after rerender:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="previous-demo-input" id="previous-demo-input-label">Enter some text here</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Enter some text here" aria-invalid="false" id="previous-demo-input" value=""/></div></div><p style="margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Current value: </p><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Previous value: </p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -28,4 +28,4 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> usePrevious&lt;T&gt;(<span class="hljs-attr">value</span>: T): T | <span class="hljs-literal">undefined</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-pagination"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-pagination</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-queue"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-queue</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-previous","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> usePrevious&lt;T&gt;(<span class="hljs-attr">value</span>: T): T | <span class="hljs-literal">undefined</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-pagination/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-pagination</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-queue/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-queue</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-previous","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-queue.html b/hooks/use-queue/index.html
similarity index 53%
rename from hooks/use-queue.html
rename to hooks/use-queue/index.html
index ab491effd8c..f7e079303e0 100644
--- a/hooks/use-queue.html
+++ b/hooks/use-queue/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-queue-82c72f7451ce8dd5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-queue</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages queue of values</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useQueue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-queue/use-queue.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-queue.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-queue-82c72f7451ce8dd5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-queue</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages queue of values</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useQueue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-queue/use-queue.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-queue.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-queue</code> limits the number of data in current state and places the rest of it in a queue.
-For example, in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications">@mantine/notifications</a> package number of
+For example, in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/notifications/">@mantine/notifications</a> package number of
 notifications that is currently displayed is limited and other new notifications are added to the queue and displayed once
 available space appears.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useQueue } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -81,4 +81,4 @@
   <span class="hljs-attr">add</span>: <span class="hljs-function">(<span class="hljs-params">...items: T[]</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">update</span>: <span class="hljs-function">(<span class="hljs-params">fn: (state: T[]) =&gt; T[]</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">cleanQueue</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-previous"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-previous</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-set-state"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-set-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-queue","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-previous/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-previous</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-set-state/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-set-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-queue","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-reduced-motion.html b/hooks/use-reduced-motion/index.html
similarity index 51%
rename from hooks/use-reduced-motion.html
rename to hooks/use-reduced-motion/index.html
index c99da03539d..19dc817f4da 100644
--- a/hooks/use-reduced-motion.html
+++ b/hooks/use-reduced-motion/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-reduced-motion-3f7e2612e2d15c8a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-reduced-motion</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if user prefers reduced motion</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useReducedMotion } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-reduced-motion/use-reduced-motion.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-reduced-motion.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-reduced-motion-3f7e2612e2d15c8a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-reduced-motion</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Detects if user prefers reduced motion</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useReducedMotion } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-reduced-motion/use-reduced-motion.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-reduced-motion.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-reduced-motion</code> detects if user <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">prefers to reduce motion</a>.
-It uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query">use-media-query</a> hook under the hood.
+It uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query/">use-media-query</a> hook under the hood.
 Hook relies on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">window.matchMedia()</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">API</a>
 and will always return <code class="m-b183c0a2 mantine-Code-root" dir="ltr">false</code> if api is not available (e.g. during server side rendering), unless the initial value is provided in the first argument.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Use hook to detect if user prefers to reduce motion (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">(prefers-reduced-motion: reduce)</code> media query) and set animations duration based on this value.</p>
@@ -31,4 +31,4 @@
   options?: {
     getInitialValueInEffect: <span class="hljs-built_in">boolean</span>;
   }
-</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-move"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-move</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-resize-observer"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-resize-observer</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-reduced-motion","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</span>): <span class="hljs-built_in">boolean</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-move/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-move</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-resize-observer/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-resize-observer</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-reduced-motion","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-resize-observer.html b/hooks/use-resize-observer/index.html
similarity index 52%
rename from hooks/use-resize-observer.html
rename to hooks/use-resize-observer/index.html
index 3232c61b2e8..b969d28ac11 100644
--- a/hooks/use-resize-observer.html
+++ b/hooks/use-resize-observer/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-resize-observer-dcdaebfe6625c7a8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-resize-observer</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks element size and position changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useResizeObserver } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-resize-observer/use-resize-observer.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-resize-observer.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-resize-observer-dcdaebfe6625c7a8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-resize-observer</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks element size and position changes</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useResizeObserver } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-resize-observer/use-resize-observer.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-resize-observer.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-bottom:var(--mantine-spacing-xs);text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Resize textarea by dragging its right bottom corner</p><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><textarea style="width:calc(25rem * var(--mantine-scale));height:calc(7.5rem * var(--mantine-scale));border:none;background-color:var(--mantine-color-blue-light);position:relative"></textarea></div><p style="margin-top:calc(0.75rem * var(--mantine-scale));text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Rect: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{
   &quot;x&quot;: 0,
   &quot;y&quot;: 0,
@@ -36,7 +36,7 @@
   <span class="hljs-keyword">const</span> [ref, rect] = <span class="hljs-title function_">useResizeObserver</span>();
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span>&gt;</span>Observed<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">See also <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-element-size">use-element-size</a> hook in case you need to subscribe only to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">See also <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-element-size/">use-element-size</a> hook in case you need to subscribe only to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code>.</p>
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useResizeObserver&lt;T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">HTMLElement</span> = <span class="hljs-built_in">any</span>&gt;(): [
   <span class="hljs-title class_">MutableRefObject</span>&lt;T&gt;,
@@ -50,4 +50,4 @@
     <span class="hljs-attr">height</span>: <span class="hljs-built_in">number</span>;
     <span class="hljs-attr">width</span>: <span class="hljs-built_in">number</span>;
   }
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-reduced-motion"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-reduced-motion</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-scroll-into-view"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-scroll-into-view</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-resize-observer","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-reduced-motion/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-reduced-motion</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-scroll-into-view/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-scroll-into-view</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-resize-observer","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-scroll-into-view.html b/hooks/use-scroll-into-view/index.html
similarity index 63%
rename from hooks/use-scroll-into-view.html
rename to hooks/use-scroll-into-view/index.html
index dc0aca8b5b8..36b42e04579 100644
--- a/hooks/use-scroll-into-view.html
+++ b/hooks/use-scroll-into-view/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-scroll-into-view-7f10e118e6507817.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-scroll-into-view</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Scrolls element into view</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useScrollIntoView } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-scroll-into-view/use-scroll-into-view.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-scroll-into-view.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-scroll-into-view-7f10e118e6507817.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-scroll-into-view</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Scrolls element into view</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useScrollIntoView } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-scroll-into-view/use-scroll-into-view.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-scroll-into-view.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-scroll-into-view</code> handles scroll behavior for any scrollable element. Basic usage works the same way as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">element.scrollIntoView()</code>.
 Hook adjusts scrolling animation with respect to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">reduced-motion</code> user preference.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Scroll to target</span></span></button><div style="width:100%;height:50vh;background-color:var(--mantine-color-blue-light)" class=""></div><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Hello there</p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useScrollIntoView } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -144,4 +144,4 @@
     alignment?: <span class="hljs-string">&#x27;start&#x27;</span> | <span class="hljs-string">&#x27;end&#x27;</span> | <span class="hljs-string">&#x27;center&#x27;</span>;
   }</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">cancel</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-resize-observer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-resize-observer</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-viewport-size"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-viewport-size</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-scroll-into-view","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-resize-observer/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-resize-observer</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-viewport-size/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-viewport-size</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-scroll-into-view","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-set-state.html b/hooks/use-set-state.html
deleted file mode 100644
index 34bfddb75ac..00000000000
--- a/hooks/use-set-state.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-set-state | Mantine</title><meta name="description" content="Manages state with setState-like API"/><meta name="og:title" content="use-set-state | Mantine"/><meta name="og:description" content="Manages state with setState-like API"/><meta name="twitter:title" content="use-set-state | Mantine"/><meta name="twitter:description" content="Manages state with setState-like API"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-set-state-7978c1afd5a50761.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-set-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages state with setState-like API</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useSetState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-set-state/use-set-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-set-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-set-state</code> works similar to how <code class="m-b183c0a2 mantine-Code-root" dir="ltr">this.setState</code> works in class components – it shallow merges state partial
-into current state.</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> [state, setState] = <span class="hljs-title function_">useSetState</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;John&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">35</span>, <span class="hljs-attr">job</span>: <span class="hljs-string">&#x27;Engineer&#x27;</span> });
-
-state; <span class="hljs-comment">// -&gt; { name: &#x27;John&#x27;, age: 35, job: &#x27;Engineer&#x27; }</span>
-
-<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Jane&#x27;</span> }); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 35, job: &#x27;Engineer&#x27; }</span>
-<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">age</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">job</span>: <span class="hljs-string">&#x27;Manager&#x27;</span> }); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 25, job: &#x27;Manager&#x27; }</span>
-<span class="hljs-title function_">setState</span>(<span class="hljs-function">(<span class="hljs-params">current</span>) =&gt;</span> ({ <span class="hljs-attr">age</span>: current.<span class="hljs-property">age</span> + <span class="hljs-number">7</span> })); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 32, job: &#x27;Manager&#x27; }</span></code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Note that it can work only with objects: primitive values and arrays are not supported:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-title function_">useSetState</span>([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]); <span class="hljs-comment">// -&gt; will not work</span>
-<span class="hljs-title function_">useSetState</span>(<span class="hljs-number">1</span>); <span class="hljs-comment">// -&gt; will not work</span>
-<span class="hljs-title function_">useSetState</span>({ <span class="hljs-attr">skills</span>: [<span class="hljs-string">&#x27;JavaScript&#x27;</span>, <span class="hljs-string">&#x27;TypeScript&#x27;</span>] }); <span class="hljs-comment">// -&gt; works fine</span></code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useSetState&lt;T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Record</span>&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">any</span>&gt;&gt;(
-  <span class="hljs-attr">initialState</span>: T
-): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">statePartial: Partial&lt;T&gt; | ((currentState: T) =&gt; Partial&lt;T&gt;)</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-queue"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-queue</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-toggle"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-toggle</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-set-state","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-set-state/index.html b/hooks/use-set-state/index.html
new file mode 100644
index 00000000000..644ef6b35b9
--- /dev/null
+++ b/hooks/use-set-state/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-set-state | Mantine</title><meta name="description" content="Manages state with setState-like API"/><meta name="og:title" content="use-set-state | Mantine"/><meta name="og:description" content="Manages state with setState-like API"/><meta name="twitter:title" content="use-set-state | Mantine"/><meta name="twitter:description" content="Manages state with setState-like API"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-set-state-7978c1afd5a50761.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-set-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages state with setState-like API</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useSetState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-set-state/use-set-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-set-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-set-state</code> works similar to how <code class="m-b183c0a2 mantine-Code-root" dir="ltr">this.setState</code> works in class components – it shallow merges state partial
+into current state.</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> [state, setState] = <span class="hljs-title function_">useSetState</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;John&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">35</span>, <span class="hljs-attr">job</span>: <span class="hljs-string">&#x27;Engineer&#x27;</span> });
+
+state; <span class="hljs-comment">// -&gt; { name: &#x27;John&#x27;, age: 35, job: &#x27;Engineer&#x27; }</span>
+
+<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Jane&#x27;</span> }); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 35, job: &#x27;Engineer&#x27; }</span>
+<span class="hljs-title function_">setState</span>({ <span class="hljs-attr">age</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">job</span>: <span class="hljs-string">&#x27;Manager&#x27;</span> }); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 25, job: &#x27;Manager&#x27; }</span>
+<span class="hljs-title function_">setState</span>(<span class="hljs-function">(<span class="hljs-params">current</span>) =&gt;</span> ({ <span class="hljs-attr">age</span>: current.<span class="hljs-property">age</span> + <span class="hljs-number">7</span> })); <span class="hljs-comment">// -&gt; { name: &#x27;Jane&#x27;, age: 32, job: &#x27;Manager&#x27; }</span></code></pre></div></div></div></div>
+<p class="MdxTypography_paragraph__Lp7wh">Note that it can work only with objects: primitive values and arrays are not supported:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-title function_">useSetState</span>([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]); <span class="hljs-comment">// -&gt; will not work</span>
+<span class="hljs-title function_">useSetState</span>(<span class="hljs-number">1</span>); <span class="hljs-comment">// -&gt; will not work</span>
+<span class="hljs-title function_">useSetState</span>({ <span class="hljs-attr">skills</span>: [<span class="hljs-string">&#x27;JavaScript&#x27;</span>, <span class="hljs-string">&#x27;TypeScript&#x27;</span>] }); <span class="hljs-comment">// -&gt; works fine</span></code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useSetState&lt;T <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Record</span>&lt;<span class="hljs-built_in">string</span>, <span class="hljs-built_in">any</span>&gt;&gt;(
+  <span class="hljs-attr">initialState</span>: T
+): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">statePartial: Partial&lt;T&gt; | ((currentState: T) =&gt; Partial&lt;T&gt;)</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-queue/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-queue</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-toggle/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-toggle</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-set-state","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-shallow-effect.html b/hooks/use-shallow-effect.html
deleted file mode 100644
index 73464200873..00000000000
--- a/hooks/use-shallow-effect.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-shallow-effect | Mantine</title><meta name="description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="og:title" content="use-shallow-effect | Mantine"/><meta name="og:description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="twitter:title" content="use-shallow-effect | Mantine"/><meta name="twitter:description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-shallow-effect-2a23600a5117eddc.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-shallow-effect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">useEffect drop in replacement with dependencies shallow comparison</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useShallowEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-shallow-effect/use-shallow-effect.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-shallow-effect.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-shallow-effect</code> works exactly like <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code>, but performs shallow dependencies comparison instead of referential comparison:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
-<span class="hljs-keyword">import</span> { useShallowEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-comment">// Will be called on each render</span>
-<span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }]);
-
-<span class="hljs-comment">// Will be called only once</span>
-<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }]);</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Hook works with primitive values, arrays and objects:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Primitive values are handled like in useEffect</span>
-<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]);
-
-<span class="hljs-comment">// Arrays with primitive values will not trigger callback</span>
-<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [[<span class="hljs-number">1</span>], [<span class="hljs-number">2</span>], [<span class="hljs-number">3</span>]]);
-
-<span class="hljs-comment">// Objects with primitive values will not trigger callback</span>
-<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }, { <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> }]);
-
-<span class="hljs-comment">// Arrays with objects will trigger callback since values are not shallow equal</span>
-<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [[{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }], [{ <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> }]]);</code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-params">cb: () =&gt; <span class="hljs-built_in">void</span>, dependencies?: React.DependencyList</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-logger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-logger</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/use-form"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-form</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-shallow-effect","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-shallow-effect/index.html b/hooks/use-shallow-effect/index.html
new file mode 100644
index 00000000000..25fe3e35bee
--- /dev/null
+++ b/hooks/use-shallow-effect/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-shallow-effect | Mantine</title><meta name="description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="og:title" content="use-shallow-effect | Mantine"/><meta name="og:description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="twitter:title" content="use-shallow-effect | Mantine"/><meta name="twitter:description" content="useEffect drop in replacement with dependencies shallow comparison"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-shallow-effect-2a23600a5117eddc.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-shallow-effect</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">useEffect drop in replacement with dependencies shallow comparison</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useShallowEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-shallow-effect/use-shallow-effect.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-shallow-effect.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-shallow-effect</code> works exactly like <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useEffect</code>, but performs shallow dependencies comparison instead of referential comparison:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
+<span class="hljs-keyword">import</span> { useShallowEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-comment">// Will be called on each render</span>
+<span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }]);
+
+<span class="hljs-comment">// Will be called only once</span>
+<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }]);</code></pre></div></div></div></div>
+<p class="MdxTypography_paragraph__Lp7wh">Hook works with primitive values, arrays and objects:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Primitive values are handled like in useEffect</span>
+<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]);
+
+<span class="hljs-comment">// Arrays with primitive values will not trigger callback</span>
+<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [[<span class="hljs-number">1</span>], [<span class="hljs-number">2</span>], [<span class="hljs-number">3</span>]]);
+
+<span class="hljs-comment">// Objects with primitive values will not trigger callback</span>
+<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }, { <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> }]);
+
+<span class="hljs-comment">// Arrays with objects will trigger callback since values are not shallow equal</span>
+<span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-function">() =&gt;</span> {}, [[{ <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }], [{ <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> }]]);</code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useShallowEffect</span>(<span class="hljs-params">cb: () =&gt; <span class="hljs-built_in">void</span>, dependencies?: React.DependencyList</span>): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-logger/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-logger</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/form/use-form/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-form</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-shallow-effect","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-text-selection.html b/hooks/use-text-selection.html
deleted file mode 100644
index a3f5f686473..00000000000
--- a/hooks/use-text-selection.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-text-selection | Mantine</title><meta name="description" content="Returns current selected text on the page"/><meta name="og:title" content="use-text-selection | Mantine"/><meta name="og:description" content="Returns current selected text on the page"/><meta name="twitter:title" content="use-text-selection | Mantine"/><meta name="twitter:description" content="Returns current selected text on the page"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-text-selection-d64f768b2561c2e6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-text-selection</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current selected text on the page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useTextSelection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-text-selection/use-text-selection.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-text-selection.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-text-selection</code> returns current text selection:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div>Select some text here or anywhere on the page and it will be displayed below</div><div>Selected text: <b></b></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useTextSelection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> selection = <span class="hljs-title function_">useTextSelection</span>();
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Select some text here or anywhere on the page and it will be displayed below<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Selected text: {selection?.toString()}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useTextSelection</span>(<span class="hljs-params"></span>): <span class="hljs-title class_">Selection</span> | <span class="hljs-literal">null</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-page-leave"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-page-leave</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-timeout"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-timeout</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-text-selection","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-text-selection/index.html b/hooks/use-text-selection/index.html
new file mode 100644
index 00000000000..7084106c77a
--- /dev/null
+++ b/hooks/use-text-selection/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-text-selection | Mantine</title><meta name="description" content="Returns current selected text on the page"/><meta name="og:title" content="use-text-selection | Mantine"/><meta name="og:description" content="Returns current selected text on the page"/><meta name="twitter:title" content="use-text-selection | Mantine"/><meta name="twitter:description" content="Returns current selected text on the page"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-text-selection-d64f768b2561c2e6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-text-selection</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current selected text on the page</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useTextSelection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-text-selection/use-text-selection.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-text-selection.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-text-selection</code> returns current text selection:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div>Select some text here or anywhere on the page and it will be displayed below</div><div>Selected text: <b></b></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useTextSelection } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> selection = <span class="hljs-title function_">useTextSelection</span>();
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Select some text here or anywhere on the page and it will be displayed below<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Selected text: {selection?.toString()}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/&gt;</span></span>
+  );
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useTextSelection</span>(<span class="hljs-params"></span>): <span class="hljs-title class_">Selection</span> | <span class="hljs-literal">null</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-page-leave/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-page-leave</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-timeout/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-timeout</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-text-selection","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-timeout.html b/hooks/use-timeout/index.html
similarity index 53%
rename from hooks/use-timeout.html
rename to hooks/use-timeout/index.html
index 7072246276f..7af20a0e4ce 100644
--- a/hooks/use-timeout.html
+++ b/hooks/use-timeout/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-timeout-bdc6d315b1e3c533.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-timeout</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in given timeout</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useTimeout } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-timeout/use-timeout.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-timeout.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-timeout-bdc6d315b1e3c533.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-timeout</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Calls function in given timeout</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useTimeout } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-timeout/use-timeout.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-timeout.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Start</span></span></button><button style="--button-bg:var(--mantine-color-red-filled);--button-hover:var(--mantine-color-red-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Clear</span></span></button><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Random value: </p></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { randomId, useTimeout } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -45,4 +45,4 @@
 </span>): {
   <span class="hljs-attr">start</span>: <span class="hljs-function">(<span class="hljs-params">...callbackParams: <span class="hljs-built_in">any</span>[]</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
   <span class="hljs-attr">clear</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-text-selection"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-text-selection</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-did-update"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-did-update</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-timeout","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-text-selection/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-text-selection</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-did-update/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-did-update</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-timeout","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-toggle.html b/hooks/use-toggle/index.html
similarity index 54%
rename from hooks/use-toggle.html
rename to hooks/use-toggle/index.html
index 5fd1576c407..0ed029b0878 100644
--- a/hooks/use-toggle.html
+++ b/hooks/use-toggle/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-toggle-fb8f3fab86583da1.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-toggle</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Switch between given values</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useToggle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-toggle/use-toggle.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-toggle.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-toggle-fb8f3fab86583da1.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-toggle</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Switch between given values</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useToggle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-toggle/use-toggle.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-toggle.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-toggle</code> implements a common state pattern – it switches state between given values:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:var(--mantine-color-blue-filled);--button-hover:var(--mantine-color-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Blue</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useToggle } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -39,4 +39,4 @@
 <div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> useToggle&lt;T = <span class="hljs-built_in">boolean</span>&gt;(
   options?: <span class="hljs-keyword">readonly</span> T[]
-): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">value?: React.SetStateAction&lt;T&gt;</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-set-state"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-set-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-uncontrolled"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-uncontrolled</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-toggle","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+): <span class="hljs-keyword">readonly</span> [T, <span class="hljs-function">(<span class="hljs-params">value?: React.SetStateAction&lt;T&gt;</span>) =&gt;</span> <span class="hljs-built_in">void</span>];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-set-state/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-set-state</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-uncontrolled/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-uncontrolled</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-toggle","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-uncontrolled.html b/hooks/use-uncontrolled.html
deleted file mode 100644
index e0a6c983e7d..00000000000
--- a/hooks/use-uncontrolled.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-uncontrolled | Mantine</title><meta name="description" content="Manage state of both controlled and uncontrolled components"/><meta name="og:title" content="use-uncontrolled | Mantine"/><meta name="og:description" content="Manage state of both controlled and uncontrolled components"/><meta name="twitter:title" content="use-uncontrolled | Mantine"/><meta name="twitter:description" content="Manage state of both controlled and uncontrolled components"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-uncontrolled-03c95ba36e5aca76.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-uncontrolled</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage state of both controlled and uncontrolled components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useUncontrolled } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-uncontrolled/use-uncontrolled.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-uncontrolled.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-uncontrolled</code> manages state for both controlled and uncontrolled components:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useUncontrolled } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">CustomInput</span>(<span class="hljs-params">{ value, defaultValue, onChange }</span>) {
-  <span class="hljs-keyword">const</span> [_value, handleChange] = <span class="hljs-title function_">useUncontrolled</span>({
-    value,
-    defaultValue,
-    <span class="hljs-attr">finalValue</span>: <span class="hljs-string">&#x27;Final&#x27;</span>,
-    onChange,
-  });
-
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span>
-      <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
-      <span class="hljs-attr">value</span>=<span class="hljs-string">{_value}</span>
-      <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> handleChange(event.currentTarget.value)}
-    /&gt;</span>
-  );
-}</code></pre></div></div></div></div>
-<div id="set-value-type" data-heading="Set value type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-value-type">Set value type</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, the hook will set type automatically, but you can provide your own type:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">useUncontrolled&lt;<span class="hljs-built_in">number</span>&gt;({
-  <span class="hljs-attr">value</span>: <span class="hljs-number">10</span>,
-  <span class="hljs-attr">defaultValue</span>: <span class="hljs-number">5</span>,
-  <span class="hljs-attr">finalValue</span>: <span class="hljs-number">20</span>,
-  <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">val</span>) =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(val &gt; <span class="hljs-number">10</span>),
-});</code></pre></div></div></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">UseUncontrolledInput</span>&lt;T&gt; {
-  <span class="hljs-comment">/** Value for controlled state */</span>
-  value?: T;
-
-  <span class="hljs-comment">/** Initial value for uncontrolled state */</span>
-  defaultValue?: T;
-
-  <span class="hljs-comment">/** Final value for uncontrolled state when value and defaultValue are not provided */</span>
-  finalValue?: T;
-
-  <span class="hljs-comment">/** Controlled state onChange handler */</span>
-  onChange?(<span class="hljs-attr">value</span>: T): <span class="hljs-built_in">void</span>;
-}
-
-<span class="hljs-keyword">function</span> useUncontrolled&lt;T&gt;(<span class="hljs-attr">input</span>: <span class="hljs-title class_">UseUncontrolledInput</span>&lt;T&gt;): [
-  T, <span class="hljs-comment">// current value</span>
-  <span class="hljs-function">(<span class="hljs-params">value: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>, <span class="hljs-comment">// onChange function</span>
-  <span class="hljs-built_in">boolean</span> <span class="hljs-comment">// value that indicates if input is controlled or not</span>
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-toggle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-toggle</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-validated-state"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-validated-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-uncontrolled","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-uncontrolled/index.html b/hooks/use-uncontrolled/index.html
new file mode 100644
index 00000000000..f733d592130
--- /dev/null
+++ b/hooks/use-uncontrolled/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-uncontrolled | Mantine</title><meta name="description" content="Manage state of both controlled and uncontrolled components"/><meta name="og:title" content="use-uncontrolled | Mantine"/><meta name="og:description" content="Manage state of both controlled and uncontrolled components"/><meta name="twitter:title" content="use-uncontrolled | Mantine"/><meta name="twitter:description" content="Manage state of both controlled and uncontrolled components"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-uncontrolled-03c95ba36e5aca76.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-uncontrolled</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manage state of both controlled and uncontrolled components</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useUncontrolled } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-uncontrolled/use-uncontrolled.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-uncontrolled.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-uncontrolled</code> manages state for both controlled and uncontrolled components:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useUncontrolled } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">CustomInput</span>(<span class="hljs-params">{ value, defaultValue, onChange }</span>) {
+  <span class="hljs-keyword">const</span> [_value, handleChange] = <span class="hljs-title function_">useUncontrolled</span>({
+    value,
+    defaultValue,
+    <span class="hljs-attr">finalValue</span>: <span class="hljs-string">&#x27;Final&#x27;</span>,
+    onChange,
+  });
+
+  <span class="hljs-keyword">return</span> (
+    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span>
+      <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>
+      <span class="hljs-attr">value</span>=<span class="hljs-string">{_value}</span>
+      <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(event)</span> =&gt;</span> handleChange(event.currentTarget.value)}
+    /&gt;</span>
+  );
+}</code></pre></div></div></div></div>
+<div id="set-value-type" data-heading="Set value type" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#set-value-type">Set value type</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh">By default, the hook will set type automatically, but you can provide your own type:</p>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">useUncontrolled&lt;<span class="hljs-built_in">number</span>&gt;({
+  <span class="hljs-attr">value</span>: <span class="hljs-number">10</span>,
+  <span class="hljs-attr">defaultValue</span>: <span class="hljs-number">5</span>,
+  <span class="hljs-attr">finalValue</span>: <span class="hljs-number">20</span>,
+  <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">val</span>) =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(val &gt; <span class="hljs-number">10</span>),
+});</code></pre></div></div></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">UseUncontrolledInput</span>&lt;T&gt; {
+  <span class="hljs-comment">/** Value for controlled state */</span>
+  value?: T;
+
+  <span class="hljs-comment">/** Initial value for uncontrolled state */</span>
+  defaultValue?: T;
+
+  <span class="hljs-comment">/** Final value for uncontrolled state when value and defaultValue are not provided */</span>
+  finalValue?: T;
+
+  <span class="hljs-comment">/** Controlled state onChange handler */</span>
+  onChange?(<span class="hljs-attr">value</span>: T): <span class="hljs-built_in">void</span>;
+}
+
+<span class="hljs-keyword">function</span> useUncontrolled&lt;T&gt;(<span class="hljs-attr">input</span>: <span class="hljs-title class_">UseUncontrolledInput</span>&lt;T&gt;): [
+  T, <span class="hljs-comment">// current value</span>
+  <span class="hljs-function">(<span class="hljs-params">value: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>, <span class="hljs-comment">// onChange function</span>
+  <span class="hljs-built_in">boolean</span> <span class="hljs-comment">// value that indicates if input is controlled or not</span>
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-toggle/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-toggle</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-validated-state/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-validated-state</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-uncontrolled","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-validated-state.html b/hooks/use-validated-state/index.html
similarity index 53%
rename from hooks/use-validated-state.html
rename to hooks/use-validated-state/index.html
index 753f951e8ef..7d67c98c9c7 100644
--- a/hooks/use-validated-state.html
+++ b/hooks/use-validated-state/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-validated-state-fc8998ad2148299f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-validated-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages state with validation</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useValidatedState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-validated-state/use-validated-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-validated-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-validated-state-fc8998ad2148299f.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-validated-state</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Manages state with validation</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useValidatedState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-validated-state/use-validated-state.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-validated-state.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-validated-state</code> 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:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">const</span> [{ lastValidValue, value, valid }, setValue] = <span class="hljs-title function_">useValidatedState</span>(
@@ -70,4 +70,4 @@
     <span class="hljs-attr">valid</span>: <span class="hljs-built_in">boolean</span>;
   },
   <span class="hljs-function">(<span class="hljs-params">val: T</span>) =&gt;</span> <span class="hljs-built_in">void</span>
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-uncontrolled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-uncontrolled</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-clipboard"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-clipboard</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-validated-state","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-uncontrolled/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-uncontrolled</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-clipboard/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-clipboard</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-validated-state","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-viewport-size.html b/hooks/use-viewport-size.html
deleted file mode 100644
index b01d7446acf..00000000000
--- a/hooks/use-viewport-size.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-viewport-size | Mantine</title><meta name="description" content="Returns current viewport size"/><meta name="og:title" content="use-viewport-size | Mantine"/><meta name="og:description" content="Returns current viewport size"/><meta name="twitter:title" content="use-viewport-size | Mantine"/><meta name="twitter:description" content="Returns current viewport size"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
-  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
-  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
-} catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-viewport-size-6680ecfddbab061d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-viewport-size</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current viewport size</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useViewportSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-viewport-size/use-viewport-size.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-viewport-size.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-viewport-size</code> returns current viewport&#x27;s <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code>, it subscribes to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">resize</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientationchange</code> events,
-during ssr hook will return <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{ width: 0, height: 0 }</code>:</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Width: <!-- -->0<!-- -->, height: <!-- -->0</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useViewportSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">const</span> { height, width } = <span class="hljs-title function_">useViewportSize</span>();
-  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>Width: {width}, height: {height}<span class="hljs-tag">&lt;/&gt;</span></span>;
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useViewportSize</span>(<span class="hljs-params"></span>): {
-  <span class="hljs-attr">height</span>: <span class="hljs-built_in">number</span>;
-  <span class="hljs-attr">width</span>: <span class="hljs-built_in">number</span>;
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-scroll-into-view"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-scroll-into-view</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-event"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-event</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-viewport-size","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-viewport-size/index.html b/hooks/use-viewport-size/index.html
new file mode 100644
index 00000000000..ade4293c53e
--- /dev/null
+++ b/hooks/use-viewport-size/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" href="/favicon.svg"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"/><meta name="og:image:width" content="1280"/><meta name="og:image:height" content="640"/><meta name="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@mantinedev"/><meta name="og:image" content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"/><style>:root{ --docs-font-primary: '__greycliffCF_e56535', '__greycliffCF_Fallback_e56535', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; }</style><title>use-viewport-size | Mantine</title><meta name="description" content="Returns current viewport size"/><meta name="og:title" content="use-viewport-size | Mantine"/><meta name="og:description" content="Returns current viewport size"/><meta name="twitter:title" content="use-viewport-size | Mantine"/><meta name="twitter:description" content="Returns current viewport size"/><meta name="next-head-count" content="16"/><script data-mantine-script="true">try {
+  var colorScheme = window.localStorage.getItem("mantine-color-scheme-value") || "light";
+  var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
+} catch (e) {}
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-viewport-size-6680ecfddbab061d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-viewport-size</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Returns current viewport size</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useViewportSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-viewport-size/use-viewport-size.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-viewport-size.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-viewport-size</code> returns current viewport&#x27;s <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">height</code>, it subscribes to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">resize</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">orientationchange</code> events,
+during ssr hook will return <code class="m-b183c0a2 mantine-Code-root" dir="ltr">{ width: 0, height: 0 }</code>:</p>
+<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="text-align:center" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Width: <!-- -->0<!-- -->, height: <!-- -->0</p></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useViewportSize } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
+
+<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
+  <span class="hljs-keyword">const</span> { height, width } = <span class="hljs-title function_">useViewportSize</span>();
+  <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>Width: {width}, height: {height}<span class="hljs-tag">&lt;/&gt;</span></span>;
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
+<div id="definition" data-heading="Definition" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#definition">Definition</a></h2>
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useViewportSize</span>(<span class="hljs-params"></span>): {
+  <span class="hljs-attr">height</span>: <span class="hljs-built_in">number</span>;
+  <span class="hljs-attr">width</span>: <span class="hljs-built_in">number</span>;
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-scroll-into-view/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-scroll-into-view</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-event/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-event</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-viewport-size","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-window-event.html b/hooks/use-window-event/index.html
similarity index 50%
rename from hooks/use-window-event.html
rename to hooks/use-window-event/index.html
index 17c86d4f3af..a8012273ec9 100644
--- a/hooks/use-window-event.html
+++ b/hooks/use-window-event/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-window-event-0c609bf56c040c05.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-window-event</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Adds event listener to window on component mount and removes it on unmount</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useWindowEvent } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-window-event/use-window-event.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-window-event.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-window-event-0c609bf56c040c05.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-window-event</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Adds event listener to window on component mount and removes it on unmount</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useWindowEvent } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-window-event/use-window-event.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-window-event.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-window-event</code> adds event listener to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">window</code> object on component mount and removes it on unmount:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { useWindowEvent } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
@@ -41,4 +41,4 @@
   <span class="hljs-attr">type</span>: K,
   <span class="hljs-attr">listener</span>: <span class="hljs-function">(<span class="hljs-params"><span class="hljs-variable language_">this</span>: Window, ev: WindowEventMap[K]</span>) =&gt;</span> <span class="hljs-built_in">any</span>,
   options?: <span class="hljs-built_in">boolean</span> | <span class="hljs-title class_">AddEventListenerOptions</span>
-): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-viewport-size"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-viewport-size</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-scroll"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-scroll</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-window-event","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+): <span class="hljs-built_in">void</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-viewport-size/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-viewport-size</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-scroll/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-scroll</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-window-event","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/hooks/use-window-scroll.html b/hooks/use-window-scroll/index.html
similarity index 50%
rename from hooks/use-window-scroll.html
rename to hooks/use-window-scroll/index.html
index 58869a5f442..9353b51401b 100644
--- a/hooks/use-window-scroll.html
+++ b/hooks/use-window-scroll/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-window-scroll-94e1846e30b2f4e8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-window-scroll">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-window-scroll</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks window scroll position</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useWindowScroll } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-window-scroll/use-window-scroll.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-window-scroll.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/hooks/use-window-scroll-94e1846e30b2f4e8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>UI and Dom</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-click-outside/">use-click-outside</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-color-scheme/">use-color-scheme</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-element-size/">use-element-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-event-listener/">use-event-listener</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-return/">use-focus-return</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-trap/">use-focus-trap</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-focus-within/">use-focus-within</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-fullscreen/">use-fullscreen</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hotkeys/">use-hotkeys</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hover/">use-hover</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-intersection/">use-intersection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-media-query/">use-media-query</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-mouse/">use-mouse</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-move/">use-move</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-reduced-motion/">use-reduced-motion</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-resize-observer/">use-resize-observer</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-scroll-into-view/">use-scroll-into-view</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-viewport-size/">use-viewport-size</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-window-event/">use-window-event</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/hooks/use-window-scroll/">use-window-scroll</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path></svg>State management</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-counter/">use-counter</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-state/">use-debounced-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-debounced-value/">use-debounced-value</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-disclosure/">use-disclosure</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-id/">use-id</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-input-state/">use-input-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-list-state/">use-list-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-local-storage/">use-local-storage</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-pagination/">use-pagination</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-previous/">use-previous</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-queue/">use-queue</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-set-state/">use-set-state</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-toggle/">use-toggle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-uncontrolled/">use-uncontrolled</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-validated-state/">use-validated-state</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><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"></path><path d="M9.7 17l4.6 0"></path></svg>Utilities</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-clipboard/">use-clipboard</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-title/">use-document-title</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-document-visibility/">use-document-visibility</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-eye-dropper/">use-eye-dropper</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-favicon/">use-favicon</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-hash/">use-hash</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-headroom/">use-headroom</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-idle/">use-idle</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-interval/">use-interval</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-merged-ref/">use-merged-ref</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-network/">use-network</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-os/">use-os</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-page-leave/">use-page-leave</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-text-selection/">use-text-selection</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-timeout/">use-timeout</a></div><div class="NavbarLinksGroup_category__OR7_2"><p class="mantine-focus-auto NavbarLinksGroup_categoryTitle__C05Ap m-b6d8b162 mantine-Text-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_categoryIcon__I88mX"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>Lifecycle</p><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-did-update/">use-did-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-force-update/">use-force-update</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-isomorphic-effect/">use-isomorphic-effect</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-logger/">use-logger</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/hooks/use-shallow-effect/">use-shallow-effect</a></div></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">use-window-scroll</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tracks window scroll position</p><div class="HeaderItem_item__LcWUO ImportStatement_wrapper__L00zb"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Import</p><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button"><code style="padding:0;margin:0" class="m-5caae6d3 m-1f5e827e mantine-InlineCodeHighlight-code"><span class="hljs-keyword">import</span> { useWindowScroll } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;</code></button></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-hooks/src/use-window-scroll/use-window-scroll.ts"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/hooks/use-window-scroll.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/hooks"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/hooks</a></div></div></div></div><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">use-window-scroll</code> returns current scroll position and a function to scroll smoothly to given position:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Scroll position x: <!-- -->0<!-- -->, y: <!-- -->0</p><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Scroll to top</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useWindowScroll } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -24,4 +24,4 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">function</span> <span class="hljs-title function_">useWindowScroll</span>(<span class="hljs-params"></span>): <span class="hljs-keyword">readonly</span> [
   { <span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>; <span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span> },
   <span class="hljs-function">(<span class="hljs-params">position: { x?: <span class="hljs-built_in">number</span>; y?: <span class="hljs-built_in">number</span> }</span>) =&gt;</span> <span class="hljs-built_in">void</span>
-];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-event"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-event</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-counter"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-counter</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-window-scroll","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+];</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-window-event/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-window-event</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/hooks/use-counter/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">use-counter</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/hooks/use-window-scroll","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e8c0c67695a..01bc375c466 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/0b42572dfc0685d6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0b42572dfc0685d6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/849baa33-4b0f9eb87903687b.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/2085-bfeaa2af84065661.js" defer=""></script><script src="/_next/static/chunks/4039-ad1c33a04f9417e5.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/2381-9c97f560cddb868b.js" defer=""></script><script src="/_next/static/chunks/8126-f58446ccde90abe6.js" defer=""></script><script src="/_next/static/chunks/7285-35f2fd967e6310ce.js" defer=""></script><script src="/_next/static/chunks/pages/index-430ac76e0cbf38c6.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-Rimlu6-dropdown" id="mantine-Rimlu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true" data-mobile-only="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx" style="padding-left:0;padding-right:0"><div class="HomePage_root__PzJpn"><div class="Jumbotron_jumbotron__j3I09"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="Jumbotron_inner__wwp5q m-7485cace mantine-Container-root"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1442 264" class="Jumbotron_heroSvg__7eh35"><path fill="currentColor" d="M94.488 103.552c.288.672.24 1.248-.144 1.728s-.96.72-1.728.72H71.16c-1.344 0-2.208-.576-2.592-1.728l-3.744-12.096H30.408l-3.744 12.096c-.384 1.152-1.2 1.728-2.448 1.728H2.76c-.768 0-1.344-.24-1.728-.72-.384-.48-.432-1.056-.144-1.728l33.12-96.624C34.488 5.776 35.4 5.2 36.744 5.2h21.744c1.44 0 2.4.576 2.88 1.728l33.12 96.624zM37.464 70h20.448L47.688 37.168 37.464 70zM1150.52 103.408c1.06 1.728.58 2.592-1.44 2.592h-21.89c-1.15 0-2.01-.48-2.59-1.44l-19.87-32.544h-3.17v31.68c0 1.536-.77 2.304-2.3 2.304h-20.59c-1.44 0-2.16-.768-2.16-2.304V7.504c0-1.536.72-2.304 2.16-2.304h31.68c12 0 21.07 3.024 27.21 9.072 6.15 5.952 9.22 14.064 9.22 24.336 0 14.976-6 25.008-18 30.096l21.74 34.704zm-48.96-76.032V49.84h8.21c8.74 0 13.1-3.744 13.1-11.232 0-7.488-4.36-11.232-13.1-11.232h-8.21zM1194.31 107.728c-11.52 0-20.93-3.456-28.23-10.368-7.29-7.008-10.94-15.984-10.94-26.928 0-10.56 3.36-19.296 10.08-26.208 6.81-7.008 15.65-10.512 26.49-10.512 10.47 0 18.77 3.264 24.92 9.792 6.14 6.528 9.21 14.544 9.21 24.048 0 4.128-.67 7.248-2.01 9.36-1.25 2.016-3.56 3.024-6.92 3.024h-38.16c2.4 5.952 8.26 8.928 17.57 8.928 5.57 0 10.42-1.104 14.55-3.312 1.05-.48 1.92-.192 2.59.864l6.62 9.216c.77 1.152.53 2.256-.72 3.312-5.76 5.856-14.11 8.784-25.05 8.784zm-15.99-44.352h26.07c-1.25-6.624-5.43-9.936-12.53-9.936-7.3 0-11.81 3.312-13.54 9.936zM1266.44 107.728c-9.6 0-17.47-3.504-23.62-10.512-6.14-7.104-9.21-15.936-9.21-26.496 0-10.464 3.07-19.248 9.21-26.352 6.15-7.104 14.02-10.656 23.62-10.656 9.41 0 16.46 3.264 21.17 9.792l.28-5.76c0-1.536.77-2.304 2.31-2.304h17.85c1.54 0 2.31.768 2.31 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.06.576-1.73.576h-17.71c-1.54 0-2.31-.768-2.31-2.304l-.28-5.904c-5.09 6.624-12.15 9.936-21.17 9.936zm-5.04-26.064c2.78 2.784 6.29 4.176 10.51 4.176s7.68-1.392 10.37-4.176c2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.05-4.176-10.37-4.176-4.22 0-7.73 1.392-10.51 4.176-2.79 2.784-4.18 6.432-4.18 10.944 0 4.512 1.39 8.16 4.18 10.944zM1359.36 107.728c-10.85 0-19.82-3.552-26.93-10.656-7.1-7.2-10.65-16.128-10.65-26.784 0-10.368 3.45-19.056 10.37-26.064 7-7.008 15.84-10.512 26.49-10.512 11.81 0 21.03 4.368 27.65 13.104.86 1.056.77 2.112-.29 3.168l-11.09 10.656c-1.34 1.344-2.64 1.344-3.88 0-3.46-3.168-7.2-4.752-11.24-4.752-4.6 0-8.25 1.392-10.94 4.176-2.59 2.784-3.89 6.192-3.89 10.224 0 4.128 1.35 7.728 4.03 10.8 2.79 2.976 6.53 4.464 11.24 4.464 3.93 0 7.58-1.632 10.94-4.896 1.25-1.248 2.54-1.2 3.89.144l11.09 10.656c1.05 1.056 1.15 2.112.28 3.168-6.62 8.736-15.64 13.104-27.07 13.104zM1428.34 107.728c-6.92 0-12.68-1.776-17.28-5.328-4.61-3.648-6.92-9.504-6.92-17.568V54.016h-8.78c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.78V19.024c0-1.536.77-2.304 2.31-2.304h19.87c1.54 0 2.3.768 2.3 2.304V35.44h10.52c1.53 0 2.3.768 2.3 2.304v13.968c0 1.536-.77 2.304-2.3 2.304h-10.52V82.24c0 1.728.58 3.072 1.73 4.032s2.59 1.44 4.32 1.44c1.63 0 3.12-.048 4.47-.144 1.63 0 2.44.72 2.44 2.16v13.248c0 1.632-1.39 2.832-4.17 3.6-2.69.768-5.71 1.152-9.07 1.152zM38.472 237.728c-10.848 0-19.824-3.552-26.928-10.656C4.44 219.872.888 210.944.888 200.288c0-10.368 3.456-19.056 10.368-26.064 7.008-7.008 15.84-10.512 26.496-10.512 11.808 0 21.024 4.368 27.648 13.104.864 1.056.768 2.112-.288 3.168L54.024 190.64c-1.344 1.344-2.64 1.344-3.888 0-3.456-3.168-7.2-4.752-11.232-4.752-4.608 0-8.256 1.392-10.944 4.176-2.592 2.784-3.888 6.192-3.888 10.224 0 4.128 1.344 7.728 4.032 10.8 2.784 2.976 6.528 4.464 11.232 4.464 3.936 0 7.584-1.632 10.944-4.896 1.248-1.248 2.544-1.2 3.888.144l11.088 10.656c1.056 1.056 1.152 2.112.288 3.168-6.624 8.736-15.648 13.104-27.072 13.104zM108.215 237.728c-10.752 0-19.68-3.552-26.784-10.656-7.008-7.104-10.512-15.888-10.512-26.352s3.504-19.248 10.512-26.352c7.104-7.104 16.032-10.656 26.784-10.656 10.656 0 19.488 3.552 26.496 10.656 7.104 7.104 10.656 15.888 10.656 26.352s-3.552 19.248-10.656 26.352c-7.008 7.104-15.84 10.656-26.496 10.656zm0-22.176c3.936 0 7.248-1.344 9.936-4.032 2.688-2.688 4.032-6.288 4.032-10.8 0-4.512-1.344-8.112-4.032-10.8-2.688-2.688-6-4.032-9.936-4.032-4.032 0-7.392 1.344-10.08 4.032-2.688 2.688-4.032 6.288-4.032 10.8 0 4.512 1.344 8.112 4.032 10.8 2.688 2.688 6.048 4.032 10.08 4.032zM159.089 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.576 7.056c4.512-7.488 11.088-11.232 19.728-11.232 8.928 0 15.456 3.936 19.584 11.808 4.8-7.872 12-11.808 21.6-11.808 7.776 0 13.872 2.592 18.288 7.776 4.416 5.088 6.624 12.24 6.624 21.456v40.752c0 1.536-.768 2.304-2.304 2.304h-19.584c-1.536 0-2.304-.768-2.304-2.304v-34.992c0-8.544-3.12-12.816-9.36-12.816-6.24 0-9.36 4.272-9.36 12.816v34.992c0 1.536-.768 2.304-2.304 2.304h-19.296c-1.728 0-2.592-.768-2.592-2.304v-34.992c0-8.544-3.072-12.816-9.216-12.816-6.24 0-9.36 4.272-9.36 12.816v34.992c0 1.536-.768 2.304-2.304 2.304h-19.584zM283.823 263.36c-1.536 0-2.304-.768-2.304-2.304v-93.312c0-1.536.768-2.304 2.304-2.304h17.856c1.536 0 2.304.768 2.304 2.304l.288 5.76c4.704-6.528 11.76-9.792 21.168-9.792 9.6 0 17.472 3.552 23.616 10.656 6.144 7.104 9.216 15.888 9.216 26.352 0 10.56-3.072 19.392-9.216 26.496-6.144 7.008-14.016 10.512-23.616 10.512-8.064 0-14.592-2.64-19.584-7.92v31.248c0 1.536-.768 2.304-2.304 2.304h-19.728zm25.776-51.696c2.688 2.784 6.144 4.176 10.368 4.176s7.728-1.392 10.512-4.176c2.784-2.784 4.176-6.432 4.176-10.944 0-4.512-1.392-8.16-4.176-10.944-2.784-2.784-6.288-4.176-10.512-4.176-4.32 0-7.824 1.392-10.512 4.176-2.592 2.688-3.888 6.288-3.888 10.8 0 4.608 1.344 8.304 4.032 11.088zM403.387 237.728c-10.752 0-19.68-3.552-26.784-10.656-7.008-7.104-10.512-15.888-10.512-26.352s3.504-19.248 10.512-26.352c7.104-7.104 16.032-10.656 26.784-10.656 10.656 0 19.488 3.552 26.496 10.656 7.104 7.104 10.656 15.888 10.656 26.352s-3.552 19.248-10.656 26.352c-7.008 7.104-15.84 10.656-26.496 10.656zm0-22.176c3.936 0 7.248-1.344 9.936-4.032 2.688-2.688 4.032-6.288 4.032-10.8 0-4.512-1.344-8.112-4.032-10.8-2.688-2.688-6-4.032-9.936-4.032-4.032 0-7.392 1.344-10.08 4.032-2.688 2.688-4.032 6.288-4.032 10.8 0 4.512 1.344 8.112 4.032 10.8 2.688 2.688 6.048 4.032 10.08 4.032zM454.261 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 7.92c4.512-8.064 11.232-12.096 20.16-12.096 7.488 0 13.584 2.64 18.288 7.92 4.8 5.28 7.2 12.384 7.2 21.312v40.752c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-19.44c-1.536 0-2.304-.768-2.304-2.304v-34.704c0-8.736-3.552-13.104-10.656-13.104-7.2 0-10.8 4.368-10.8 13.104v34.704c0 1.536-.768 2.304-2.304 2.304h-19.584zM572.181 237.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936zM617.386 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 7.92c4.512-8.064 11.232-12.096 20.16-12.096 7.488 0 13.584 2.64 18.288 7.92 4.8 5.28 7.2 12.384 7.2 21.312v40.752c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-19.44c-1.536 0-2.304-.768-2.304-2.304v-34.704c0-8.736-3.552-13.104-10.656-13.104-7.2 0-10.8 4.368-10.8 13.104v34.704c0 1.536-.768 2.304-2.304 2.304h-19.584zM727.741 237.728c-6.912 0-12.672-1.776-17.28-5.328-4.608-3.648-6.912-9.504-6.912-17.568v-30.816h-8.784c-1.44 0-2.159-.768-2.159-2.304v-13.968c0-1.536.719-2.304 2.159-2.304h8.784v-16.416c0-1.536.768-2.304 2.304-2.304h19.873c1.536 0 2.303.768 2.303 2.304v16.416h10.512c1.536 0 2.304.768 2.304 2.304v13.968c0 1.536-.768 2.304-2.304 2.304h-10.512v28.224c0 1.728.576 3.072 1.728 4.032 1.152.96 2.592 1.44 4.32 1.44 1.632 0 3.12-.048 4.464-.144 1.632 0 2.448.72 2.448 2.16v13.248c0 1.632-1.392 2.832-4.176 3.6-2.688.768-5.712 1.152-9.072 1.152zM777.82 237.728c-11.712 0-21.024-4.08-27.936-12.24-.96-1.056-.768-2.496.576-4.32l6.336-8.928c.96-1.536 2.208-1.824 3.744-.864 6.336 4.224 11.568 6.336 15.696 6.336 3.456 0 5.184-1.152 5.184-3.456 0-1.056-.384-1.92-1.152-2.592-.768-.672-2.256-1.488-4.464-2.448l-9.216-3.6c-10.176-3.936-15.264-10.464-15.264-19.584 0-6.816 2.496-12.24 7.488-16.272 5.088-4.032 11.28-6.048 18.576-6.048 10.176 0 18.48 3.792 24.912 11.376.864.96.816 1.92-.144 2.88l-8.208 9.792c-.768.96-1.872.96-3.312 0-4.704-3.552-8.688-5.328-11.952-5.328-2.976 0-4.464 1.2-4.464 3.6 0 1.92 1.488 3.408 4.464 4.464l11.232 4.464c10.464 4.128 15.648 10.944 15.552 20.448-.096 7.104-2.784 12.624-8.064 16.56-5.28 3.84-11.808 5.76-19.584 5.76zM847.448 236c-1.536 0-2.304-.768-2.304-2.304v-98.352c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728zM906.263 151.76c-2.496 2.496-5.616 3.744-9.36 3.744-3.744 0-6.864-1.248-9.36-3.744-2.496-2.496-3.744-5.616-3.744-9.36 0-3.648 1.248-6.72 3.744-9.216 2.496-2.496 5.616-3.744 9.36-3.744 3.744 0 6.864 1.248 9.36 3.744 2.496 2.496 3.744 5.568 3.744 9.216 0 3.648-1.248 6.768-3.744 9.36zM886.967 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.872c1.536 0 2.304.768 2.304 2.304v65.952c0 1.536-.768 2.304-2.304 2.304h-19.872zM968.236 237.728c-9.024 0-16.08-3.312-21.168-9.936l-.288 5.904c0 1.536-.768 2.304-2.304 2.304h-17.712c-.672 0-1.248-.192-1.728-.576a2.357 2.357 0 01-.72-1.728v-98.352c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v36c4.608-5.088 11.136-7.632 19.584-7.632 9.6 0 17.472 3.552 23.616 10.656 6.144 7.104 9.218 15.888 9.218 26.352 0 10.56-3.074 19.392-9.218 26.496-6.144 7.008-14.016 10.512-23.616 10.512zm-15.84-26.064c2.688 2.784 6.144 4.176 10.368 4.176s7.728-1.392 10.512-4.176c2.784-2.784 4.176-6.432 4.176-10.944 0-4.512-1.392-8.16-4.176-10.944-2.784-2.784-6.288-4.176-10.512-4.176-4.32 0-7.824 1.392-10.512 4.176-2.592 2.688-3.888 6.288-3.888 10.8 0 4.608 1.344 8.304 4.032 11.088zM1014.79 236c-1.53 0-2.3-.768-2.3-2.304v-65.952c0-1.536.77-2.304 2.3-2.304h19.01c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.69-9.12 7.58-13.68 14.69-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.01 2.256-3.03 1.872-2.4-.48-4.17-.72-5.32-.72-4.42 0-7.92 1.344-10.52 4.032-2.49 2.592-3.74 6.528-3.74 11.808v32.4c0 1.536-.77 2.304-2.3 2.304h-19.59zM1098.25 237.728c-9.6 0-17.47-3.504-23.61-10.512-6.15-7.104-9.22-15.936-9.22-26.496 0-10.464 3.07-19.248 9.22-26.352 6.14-7.104 14.01-10.656 23.61-10.656 9.41 0 16.47 3.264 21.17 9.792l.29-5.76c0-1.536.77-2.304 2.3-2.304h17.86c1.53 0 2.3.768 2.3 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.05.576-1.73.576h-17.71c-1.53 0-2.3-.768-2.3-2.304l-.29-5.904c-5.09 6.624-12.14 9.936-21.17 9.936zm-5.04-26.064c2.79 2.784 6.29 4.176 10.51 4.176 4.23 0 7.68-1.392 10.37-4.176 2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.05-4.176-10.37-4.176-4.22 0-7.72 1.392-10.51 4.176-2.78 2.784-4.17 6.432-4.17 10.944 0 4.512 1.39 8.16 4.17 10.944zM1159.5 236c-1.54 0-2.31-.768-2.31-2.304v-65.952c0-1.536.77-2.304 2.31-2.304h19c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.69-9.12 7.59-13.68 14.69-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.01 2.256-3.02 1.872-2.4-.48-4.18-.72-5.33-.72-4.42 0-7.92 1.344-10.51 4.032-2.5 2.592-3.75 6.528-3.75 11.808v32.4c0 1.536-.76 2.304-2.3 2.304h-19.58zM1229.67 263.36c-2.11 0-2.73-.864-1.87-2.592L1238.17 236l-27.36-68.112c-.58-1.632.05-2.448 1.87-2.448h20.02c1.34 0 2.25.576 2.73 1.728l14.4 40.608 14.55-40.608c.38-1.152 1.29-1.728 2.73-1.728h20.02c1.73 0 2.3.816 1.73 2.448l-37.3 93.744c-.48 1.152-1.39 1.728-2.74 1.728h-19.15z"></path><path fill="url(#hero-a)" d="M141.984 106c-1.536 0-2.304-.768-2.304-2.304v-49.68h-8.352c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.352v-8.784c0-17.28 8.928-25.92 26.784-25.92 4.896 0 9.072.912 12.528 2.736.864.384 1.296 1.152 1.296 2.304v16.128c0 .864-.624 1.2-1.872 1.008-3.456-.576-5.568-.864-6.336-.864-3.072 0-5.184.672-6.336 2.016-1.152 1.248-1.728 3.12-1.728 5.616v5.76h14.112c1.44 0 2.16.768 2.16 2.304v13.968c0 1.536-.72 2.304-2.16 2.304h-14.112v49.68c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-b)" d="M214.941 107.728c-7.392 0-13.488-2.64-18.288-7.92-4.704-5.28-7.056-12.384-7.056-21.312V37.744c0-1.536.768-2.304 2.304-2.304h19.584c1.536 0 2.304.768 2.304 2.304v34.704c0 8.736 3.552 13.104 10.656 13.104 7.2 0 10.8-4.368 10.8-13.104V37.744c0-1.536.768-2.304 2.304-2.304h19.44c.672 0 1.248.24 1.728.72.48.384.72.912.72 1.584v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-18.864c-1.536 0-2.304-.816-2.304-2.448l-.576-7.92c-4.512 8.064-11.28 12.096-20.304 12.096z"></path><path fill="url(#hero-c)" d="M276.558 106c-1.536 0-2.304-.768-2.304-2.304V5.344c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-d)" d="M315.933 106c-1.536 0-2.304-.768-2.304-2.304V5.344c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-e)" d="M367.548 133.36c-2.112 0-2.736-.864-1.872-2.592L376.044 106l-27.36-68.112c-.576-1.632.048-2.448 1.872-2.448h20.016c1.344 0 2.256.576 2.736 1.728l14.4 40.608 14.544-40.608c.384-1.152 1.296-1.728 2.736-1.728h20.016c1.728 0 2.304.816 1.728 2.448l-37.296 93.744c-.48 1.152-1.392 1.728-2.736 1.728h-19.152z"></path><path fill="url(#hero-f)" d="M473.578 106c-1.536 0-2.304-.768-2.304-2.304v-49.68h-8.352c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.352v-8.784c0-17.28 8.928-25.92 26.784-25.92 4.896 0 9.072.912 12.528 2.736.864.384 1.296 1.152 1.296 2.304v16.128c0 .864-.624 1.2-1.872 1.008-3.456-.576-5.568-.864-6.336-.864-3.072 0-5.184.672-6.336 2.016-1.152 1.248-1.728 3.12-1.728 5.616v5.76h14.112c1.44 0 2.16.768 2.16 2.304v13.968c0 1.536-.72 2.304-2.16 2.304H495.61v49.68c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-g)" d="M553.806 107.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936z"></path><path fill="url(#hero-h)" d="M625.939 107.728c-9.6 0-17.472-3.504-23.616-10.512-6.144-7.104-9.216-15.936-9.216-26.496 0-10.464 3.072-19.248 9.216-26.352 6.144-7.104 14.016-10.656 23.616-10.656 9.408 0 16.464 3.264 21.168 9.792l.288-5.76c0-1.536.768-2.304 2.304-2.304h17.856c1.536 0 2.304.768 2.304 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-17.712c-1.536 0-2.304-.768-2.304-2.304l-.288-5.904c-5.088 6.624-12.144 9.936-21.168 9.936zm-5.04-26.064c2.784 2.784 6.288 4.176 10.512 4.176s7.68-1.392 10.368-4.176c2.688-2.784 4.032-6.48 4.032-11.088 0-4.512-1.344-8.112-4.032-10.8-2.592-2.784-6.048-4.176-10.368-4.176-4.224 0-7.728 1.392-10.512 4.176-2.784 2.784-4.176 6.432-4.176 10.944 0 4.512 1.392 8.16 4.176 10.944z"></path><path fill="url(#hero-i)" d="M715.695 107.728c-6.912 0-12.672-1.776-17.28-5.328-4.608-3.648-6.912-9.504-6.912-17.568V54.016h-8.784c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.784V19.024c0-1.536.768-2.304 2.304-2.304h19.872c1.536 0 2.304.768 2.304 2.304V35.44h10.512c1.536 0 2.304.768 2.304 2.304v13.968c0 1.536-.768 2.304-2.304 2.304h-10.512V82.24c0 1.728.576 3.072 1.728 4.032 1.152.96 2.592 1.44 4.32 1.44 1.632 0 3.12-.048 4.464-.144 1.632 0 2.448.72 2.448 2.16v13.248c0 1.632-1.392 2.832-4.176 3.6-2.688.768-5.712 1.152-9.072 1.152z"></path><path fill="url(#hero-j)" d="M764.785 107.728c-7.392 0-13.488-2.64-18.288-7.92-4.704-5.28-7.056-12.384-7.056-21.312V37.744c0-1.536.768-2.304 2.304-2.304h19.584c1.536 0 2.304.768 2.304 2.304v34.704c0 8.736 3.552 13.104 10.656 13.104 7.2 0 10.8-4.368 10.8-13.104V37.744c0-1.536.768-2.304 2.304-2.304h19.44c.672 0 1.248.24 1.728.72.48.384.72.912.72 1.584v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-18.864c-1.536 0-2.304-.816-2.304-2.448l-.576-7.92c-4.512 8.064-11.28 12.096-20.304 12.096z"></path><path fill="url(#hero-k)" d="M826.401 106c-1.536 0-2.304-.768-2.304-2.304V37.744c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.688-9.12 7.584-13.68 14.688-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.008 2.256-3.024 1.872-2.4-.48-4.176-.72-5.328-.72-4.416 0-7.92 1.344-10.512 4.032-2.496 2.592-3.744 6.528-3.744 11.808v32.4c0 1.536-.768 2.304-2.304 2.304h-19.584z"></path><path fill="url(#hero-l)" d="M916.197 107.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936z"></path><path fill="url(#hero-m)" d="M988.329 107.728c-9.6 0-17.472-3.504-23.616-10.512-6.144-7.104-9.216-15.936-9.216-26.496 0-10.464 3.072-19.248 9.216-26.352 6.144-7.104 14.016-10.656 23.616-10.656 8.448 0 14.981 2.544 19.581 7.632v-36c0-1.536.77-2.304 2.31-2.304h19.73c1.53 0 2.3.768 2.3 2.304v98.352c0 .672-.24 1.248-.72 1.728-.48.384-1.06.576-1.73.576h-17.71c-1.54 0-2.3-.768-2.3-2.304l-.29-5.904c-5.09 6.624-12.147 9.936-21.171 9.936zm-5.04-26.064c2.784 2.784 6.288 4.176 10.512 4.176s7.679-1.392 10.369-4.176c2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.049-4.176-10.369-4.176-4.224 0-7.728 1.392-10.512 4.176-2.784 2.784-4.176 6.432-4.176 10.944 0 4.512 1.392 8.16 4.176 10.944z"></path><defs><linearGradient id="hero-a" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-b" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-c" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-d" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-e" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-f" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-g" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-h" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-i" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-j" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-k" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-l" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-m" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient></defs></svg><p class="mantine-focus-auto Jumbotron_description__VWA53 m-b6d8b162 mantine-Text-root">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</p><style data-mantine-styles="inline">.__m__-R1q2ulu6{--sg-spacing-x:calc(1.875rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));--sg-cols:1;}@media(min-width: 62em){.__m__-R1q2ulu6{--sg-cols:3;}}</style><div style="max-width:calc(50rem * var(--mantine-scale));margin-top:calc(2.5rem * var(--mantine-scale))" class="m-2415a157 mantine-SimpleGrid-root __m__-R1q2ulu6"><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-scale" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M7 20l10 0"></path><path d="M6 6l6 -1l6 1"></path><path d="M12 3l0 17"></path><path d="M9 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path><path d="M21 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">Free and open source</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">All packages have MIT license, you can use Mantine in any project</p></div></div><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lifebuoy" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M15 15l3.35 3.35"></path><path d="M9 15l-3.35 3.35"></path><path d="M5.65 5.65l3.35 3.35"></path><path d="M18.35 5.65l-3.35 3.35"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">TypeScript based</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Build type safe applications, all components and hooks export types</p></div></div><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">Use anywhere</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Mantine supports all modern frameworks: Next.js, Remix, etc.</p></div></div></div><div class="Jumbotron_controls__aRtRk m-4081bf90 mantine-Group-root"><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-radius:var(--mantine-radius-md);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active Jumbotron_control__nxFZw m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xl" data-primary="true" href="/getting-started"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Get started</span></span></a><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active Jumbotron_control__nxFZw m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xl" data-with-left-section="true" href="https://github.com/mantinedev/mantine" data-github="true"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></span><span class="m-811560b9 mantine-Button-label">GitHub</span></span></a></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(2.5rem * var(--mantine-scale));--waves-width:150%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="DemoTabs_root__pcqcD"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">100+ components</h2><style data-mantine-styles="inline">.__m__-R1a6ulu6{--grid-gutter:0;}</style><div style="margin-top:var(--mantine-spacing-md)" class="m-410352e9 mantine-Grid-root __m__-R1a6ulu6"><div class="m-dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-R6ra6ulu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-R6ra6ulu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-R6ra6ulu6"><div class="DemoTabs_controls__DDfxU"><div style="height:calc(5rem * var(--mantine-scale));transform:translateY(0)" class="DemoTabs_controlsIndicator__ghMr9"></div><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button" data-active="true"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Inputs</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">20+ input components</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Date pickers</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Calendar, date pickers, time inputs</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"></path><path d="M4 12l8 4l8 -4"></path><path d="M4 16l8 4l8 -4"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Overlays &amp; Navigation</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Modal, HoverCard, Tabs, Stepper</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Content</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Accordion, Timeline</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"></path><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Rich text editor</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Tiptap based rich text editor</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M15 6l.01 0"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M3 13l4 -4a3 5 0 0 1 3 0l4 4"></path><path d="M13 12l2 -2a3 5 0 0 1 3 0l3 3"></path><path d="M8 21l.01 0"></path><path d="M12 21l.01 0"></path><path d="M16 21l.01 0"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Carousel</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Embla based carousel</p></div></div></button></div></div><style data-mantine-styles="inline">.__m__-Rara6ulu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-Rara6ulu6{--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-Rara6ulu6"><div class="DemoTabs_demo__qymi8"><style data-mantine-styles="inline">.__m__-Rmqra6ulu6{--sg-spacing-x:var(--mantine-spacing-xl);--sg-spacing-y:var(--mantine-spacing-xl);--sg-cols:1;}@media(min-width: 48em){.__m__-Rmqra6ulu6{--sg-cols:2;}}</style><div style="row-gap:var(--mantine-spacing-md" class="m-2415a157 mantine-SimpleGrid-root __m__-Rmqra6ulu6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R3dmqra6ulu6" id="mantine-R3dmqra6ulu6-label">Text input<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Text input" required="" aria-invalid="false" id="mantine-R3dmqra6ulu6"/></div></div><div class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-required="true" for="mantine-R5dmqra6ulu6" id="mantine-R5dmqra6ulu6-label">Password input<span class="m-78a94662 mantine-InputWrapper-required mantine-PasswordInput-required" aria-hidden="true"> *</span></label><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-with-right-section="true"><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input required="" class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-R5dmqra6ulu6" placeholder="Password input" autoComplete="off" type="password"/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-ColorInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-ColorInput-label" for="mantine-R7dmqra6ulu6" id="mantine-R7dmqra6ulu6-label">Color input</label><div class="m-6c018570 mantine-Input-wrapper mantine-ColorInput-wrapper" data-variant="default" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-ColorInput-section"><div style="--cs-size:var(--ci-preview-size)" class="mantine-focus-auto m-c5ccdcab mantine-ColorInput-colorPreview m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:rgba(34, 138, 230, 0.8)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div><input class="m-8fb7ebe7 mantine-Input-input mantine-ColorInput-input" data-variant="default" autoComplete="off" placeholder="What other library has that?" spellcheck="false" aria-invalid="false" id="mantine-R7dmqra6ulu6" value="rgba(34, 138, 230, 0.8)"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R9dmqra6ulu6" id="mantine-R9dmqra6ulu6-label">Native select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" aria-invalid="false" id="mantine-R9dmqra6ulu6"><option value="React">React</option><option value="Angular">Angular</option><option value="Svelte">Svelte</option><option value="Vue">Vue</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Rbdmqra6ulu6" id="mantine-Rbdmqra6ulu6-label">Custom select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Custom select" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rbdmqra6ulu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Rddmqra6ulu6" id="mantine-Rddmqra6ulu6-label">Searchable select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Search me" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rddmqra6ulu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" for="mantine-Rfdmqra6ulu6" id="mantine-Rfdmqra6ulu6-label">Custom multi select</label><div class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick all you want" aria-haspopup="listbox" autoComplete="off" id="mantine-Rfdmqra6ulu6" aria-invalid="false" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-Autocomplete-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Autocomplete-label" for="mantine-Rhdmqra6ulu6" id="mantine-Rhdmqra6ulu6-label">Autocomplete</label><div class="m-6c018570 mantine-Input-wrapper mantine-Autocomplete-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-Autocomplete-input" data-variant="default" placeholder="Enter anything with suggestions" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rhdmqra6ulu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rjdmqra6ulu6" id="mantine-Rjdmqra6ulu6-label">With description</label><p class="m-fe47ce59 mantine-InputWrapper-description mantine-TextInput-description" id="mantine-Rjdmqra6ulu6-description">Every input can have description...</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Additional info is always useful" aria-invalid="false" aria-describedby="mantine-Rjdmqra6ulu6-description" id="mantine-Rjdmqra6ulu6"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rldmqra6ulu6" id="mantine-Rldmqra6ulu6-label">With error</label><div style="--input-margin-bottom:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-error="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" data-error="true" placeholder="Oh-oh" aria-invalid="true" aria-describedby="mantine-Rldmqra6ulu6-error" id="mantine-Rldmqra6ulu6"/></div><p class="m-8f816625 mantine-InputWrapper-error mantine-TextInput-error" id="mantine-Rldmqra6ulu6-error">...and error</p></div></div></div></div></div></div></div></div><div class="Waves_root__AApaY" data-alt="true"><svg style="--waves-height:calc(2.625rem * var(--mantine-scale));--waves-width:220%" class="Waves_waves__izljv" data-flip="true" data-alt="true" data-rotate="true" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z" data-alt="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Dark color scheme</h2><style data-mantine-styles="inline">.__m__-Reqaulu6{--sg-spacing-x:calc(1.875rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));--sg-cols:1;}@media(min-width: 48em){.__m__-Reqaulu6{--sg-spacing-x:calc(3.75rem * var(--mantine-scale));--sg-spacing-y:calc(3.75rem * var(--mantine-scale));--sg-cols:2;}}</style><div style="margin-top:calc(1.875rem * var(--mantine-scale));padding-bottom:calc(3.75rem * var(--mantine-scale))" class="m-2415a157 mantine-SimpleGrid-root __m__-Reqaulu6"><div><img style="--image-radius:var(--mantine-radius-md)" class="DarkTheme_image__CQOZ2 m-9e117634 mantine-Image-root" src="/_next/static/media/dark-theme-image.68c24d76.png" alt="Dark and light theme"/></div><div><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">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.</p><div style="margin-top:var(--mantine-spacing-xl)" class="DarkTheme_codeHighlight__38Rck m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/0b42572dfc0685d6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0b42572dfc0685d6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/849baa33-4b0f9eb87903687b.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/2085-bfeaa2af84065661.js" defer=""></script><script src="/_next/static/chunks/4039-ad1c33a04f9417e5.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/3773-9b101a05417aee65.js" defer=""></script><script src="/_next/static/chunks/1757-14b12002dae37571.js" defer=""></script><script src="/_next/static/chunks/4485-54fa58b62686123b.js" defer=""></script><script src="/_next/static/chunks/8945-dced5d0b206191b0.js" defer=""></script><script src="/_next/static/chunks/9935-a1af4e961299387a.js" defer=""></script><script src="/_next/static/chunks/7567-d1146e91d1df2c98.js" defer=""></script><script src="/_next/static/chunks/6-97d8f3d87523372c.js" defer=""></script><script src="/_next/static/chunks/2381-9c97f560cddb868b.js" defer=""></script><script src="/_next/static/chunks/8126-f58446ccde90abe6.js" defer=""></script><script src="/_next/static/chunks/7285-35f2fd967e6310ce.js" defer=""></script><script src="/_next/static/chunks/pages/index-430ac76e0cbf38c6.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-Rimlu6-dropdown" id="mantine-Rimlu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true" data-mobile-only="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx" style="padding-left:0;padding-right:0"><div class="HomePage_root__PzJpn"><div class="Jumbotron_jumbotron__j3I09"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="Jumbotron_inner__wwp5q m-7485cace mantine-Container-root"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1442 264" class="Jumbotron_heroSvg__7eh35"><path fill="currentColor" d="M94.488 103.552c.288.672.24 1.248-.144 1.728s-.96.72-1.728.72H71.16c-1.344 0-2.208-.576-2.592-1.728l-3.744-12.096H30.408l-3.744 12.096c-.384 1.152-1.2 1.728-2.448 1.728H2.76c-.768 0-1.344-.24-1.728-.72-.384-.48-.432-1.056-.144-1.728l33.12-96.624C34.488 5.776 35.4 5.2 36.744 5.2h21.744c1.44 0 2.4.576 2.88 1.728l33.12 96.624zM37.464 70h20.448L47.688 37.168 37.464 70zM1150.52 103.408c1.06 1.728.58 2.592-1.44 2.592h-21.89c-1.15 0-2.01-.48-2.59-1.44l-19.87-32.544h-3.17v31.68c0 1.536-.77 2.304-2.3 2.304h-20.59c-1.44 0-2.16-.768-2.16-2.304V7.504c0-1.536.72-2.304 2.16-2.304h31.68c12 0 21.07 3.024 27.21 9.072 6.15 5.952 9.22 14.064 9.22 24.336 0 14.976-6 25.008-18 30.096l21.74 34.704zm-48.96-76.032V49.84h8.21c8.74 0 13.1-3.744 13.1-11.232 0-7.488-4.36-11.232-13.1-11.232h-8.21zM1194.31 107.728c-11.52 0-20.93-3.456-28.23-10.368-7.29-7.008-10.94-15.984-10.94-26.928 0-10.56 3.36-19.296 10.08-26.208 6.81-7.008 15.65-10.512 26.49-10.512 10.47 0 18.77 3.264 24.92 9.792 6.14 6.528 9.21 14.544 9.21 24.048 0 4.128-.67 7.248-2.01 9.36-1.25 2.016-3.56 3.024-6.92 3.024h-38.16c2.4 5.952 8.26 8.928 17.57 8.928 5.57 0 10.42-1.104 14.55-3.312 1.05-.48 1.92-.192 2.59.864l6.62 9.216c.77 1.152.53 2.256-.72 3.312-5.76 5.856-14.11 8.784-25.05 8.784zm-15.99-44.352h26.07c-1.25-6.624-5.43-9.936-12.53-9.936-7.3 0-11.81 3.312-13.54 9.936zM1266.44 107.728c-9.6 0-17.47-3.504-23.62-10.512-6.14-7.104-9.21-15.936-9.21-26.496 0-10.464 3.07-19.248 9.21-26.352 6.15-7.104 14.02-10.656 23.62-10.656 9.41 0 16.46 3.264 21.17 9.792l.28-5.76c0-1.536.77-2.304 2.31-2.304h17.85c1.54 0 2.31.768 2.31 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.06.576-1.73.576h-17.71c-1.54 0-2.31-.768-2.31-2.304l-.28-5.904c-5.09 6.624-12.15 9.936-21.17 9.936zm-5.04-26.064c2.78 2.784 6.29 4.176 10.51 4.176s7.68-1.392 10.37-4.176c2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.05-4.176-10.37-4.176-4.22 0-7.73 1.392-10.51 4.176-2.79 2.784-4.18 6.432-4.18 10.944 0 4.512 1.39 8.16 4.18 10.944zM1359.36 107.728c-10.85 0-19.82-3.552-26.93-10.656-7.1-7.2-10.65-16.128-10.65-26.784 0-10.368 3.45-19.056 10.37-26.064 7-7.008 15.84-10.512 26.49-10.512 11.81 0 21.03 4.368 27.65 13.104.86 1.056.77 2.112-.29 3.168l-11.09 10.656c-1.34 1.344-2.64 1.344-3.88 0-3.46-3.168-7.2-4.752-11.24-4.752-4.6 0-8.25 1.392-10.94 4.176-2.59 2.784-3.89 6.192-3.89 10.224 0 4.128 1.35 7.728 4.03 10.8 2.79 2.976 6.53 4.464 11.24 4.464 3.93 0 7.58-1.632 10.94-4.896 1.25-1.248 2.54-1.2 3.89.144l11.09 10.656c1.05 1.056 1.15 2.112.28 3.168-6.62 8.736-15.64 13.104-27.07 13.104zM1428.34 107.728c-6.92 0-12.68-1.776-17.28-5.328-4.61-3.648-6.92-9.504-6.92-17.568V54.016h-8.78c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.78V19.024c0-1.536.77-2.304 2.31-2.304h19.87c1.54 0 2.3.768 2.3 2.304V35.44h10.52c1.53 0 2.3.768 2.3 2.304v13.968c0 1.536-.77 2.304-2.3 2.304h-10.52V82.24c0 1.728.58 3.072 1.73 4.032s2.59 1.44 4.32 1.44c1.63 0 3.12-.048 4.47-.144 1.63 0 2.44.72 2.44 2.16v13.248c0 1.632-1.39 2.832-4.17 3.6-2.69.768-5.71 1.152-9.07 1.152zM38.472 237.728c-10.848 0-19.824-3.552-26.928-10.656C4.44 219.872.888 210.944.888 200.288c0-10.368 3.456-19.056 10.368-26.064 7.008-7.008 15.84-10.512 26.496-10.512 11.808 0 21.024 4.368 27.648 13.104.864 1.056.768 2.112-.288 3.168L54.024 190.64c-1.344 1.344-2.64 1.344-3.888 0-3.456-3.168-7.2-4.752-11.232-4.752-4.608 0-8.256 1.392-10.944 4.176-2.592 2.784-3.888 6.192-3.888 10.224 0 4.128 1.344 7.728 4.032 10.8 2.784 2.976 6.528 4.464 11.232 4.464 3.936 0 7.584-1.632 10.944-4.896 1.248-1.248 2.544-1.2 3.888.144l11.088 10.656c1.056 1.056 1.152 2.112.288 3.168-6.624 8.736-15.648 13.104-27.072 13.104zM108.215 237.728c-10.752 0-19.68-3.552-26.784-10.656-7.008-7.104-10.512-15.888-10.512-26.352s3.504-19.248 10.512-26.352c7.104-7.104 16.032-10.656 26.784-10.656 10.656 0 19.488 3.552 26.496 10.656 7.104 7.104 10.656 15.888 10.656 26.352s-3.552 19.248-10.656 26.352c-7.008 7.104-15.84 10.656-26.496 10.656zm0-22.176c3.936 0 7.248-1.344 9.936-4.032 2.688-2.688 4.032-6.288 4.032-10.8 0-4.512-1.344-8.112-4.032-10.8-2.688-2.688-6-4.032-9.936-4.032-4.032 0-7.392 1.344-10.08 4.032-2.688 2.688-4.032 6.288-4.032 10.8 0 4.512 1.344 8.112 4.032 10.8 2.688 2.688 6.048 4.032 10.08 4.032zM159.089 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.576 7.056c4.512-7.488 11.088-11.232 19.728-11.232 8.928 0 15.456 3.936 19.584 11.808 4.8-7.872 12-11.808 21.6-11.808 7.776 0 13.872 2.592 18.288 7.776 4.416 5.088 6.624 12.24 6.624 21.456v40.752c0 1.536-.768 2.304-2.304 2.304h-19.584c-1.536 0-2.304-.768-2.304-2.304v-34.992c0-8.544-3.12-12.816-9.36-12.816-6.24 0-9.36 4.272-9.36 12.816v34.992c0 1.536-.768 2.304-2.304 2.304h-19.296c-1.728 0-2.592-.768-2.592-2.304v-34.992c0-8.544-3.072-12.816-9.216-12.816-6.24 0-9.36 4.272-9.36 12.816v34.992c0 1.536-.768 2.304-2.304 2.304h-19.584zM283.823 263.36c-1.536 0-2.304-.768-2.304-2.304v-93.312c0-1.536.768-2.304 2.304-2.304h17.856c1.536 0 2.304.768 2.304 2.304l.288 5.76c4.704-6.528 11.76-9.792 21.168-9.792 9.6 0 17.472 3.552 23.616 10.656 6.144 7.104 9.216 15.888 9.216 26.352 0 10.56-3.072 19.392-9.216 26.496-6.144 7.008-14.016 10.512-23.616 10.512-8.064 0-14.592-2.64-19.584-7.92v31.248c0 1.536-.768 2.304-2.304 2.304h-19.728zm25.776-51.696c2.688 2.784 6.144 4.176 10.368 4.176s7.728-1.392 10.512-4.176c2.784-2.784 4.176-6.432 4.176-10.944 0-4.512-1.392-8.16-4.176-10.944-2.784-2.784-6.288-4.176-10.512-4.176-4.32 0-7.824 1.392-10.512 4.176-2.592 2.688-3.888 6.288-3.888 10.8 0 4.608 1.344 8.304 4.032 11.088zM403.387 237.728c-10.752 0-19.68-3.552-26.784-10.656-7.008-7.104-10.512-15.888-10.512-26.352s3.504-19.248 10.512-26.352c7.104-7.104 16.032-10.656 26.784-10.656 10.656 0 19.488 3.552 26.496 10.656 7.104 7.104 10.656 15.888 10.656 26.352s-3.552 19.248-10.656 26.352c-7.008 7.104-15.84 10.656-26.496 10.656zm0-22.176c3.936 0 7.248-1.344 9.936-4.032 2.688-2.688 4.032-6.288 4.032-10.8 0-4.512-1.344-8.112-4.032-10.8-2.688-2.688-6-4.032-9.936-4.032-4.032 0-7.392 1.344-10.08 4.032-2.688 2.688-4.032 6.288-4.032 10.8 0 4.512 1.344 8.112 4.032 10.8 2.688 2.688 6.048 4.032 10.08 4.032zM454.261 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 7.92c4.512-8.064 11.232-12.096 20.16-12.096 7.488 0 13.584 2.64 18.288 7.92 4.8 5.28 7.2 12.384 7.2 21.312v40.752c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-19.44c-1.536 0-2.304-.768-2.304-2.304v-34.704c0-8.736-3.552-13.104-10.656-13.104-7.2 0-10.8 4.368-10.8 13.104v34.704c0 1.536-.768 2.304-2.304 2.304h-19.584zM572.181 237.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936zM617.386 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 7.92c4.512-8.064 11.232-12.096 20.16-12.096 7.488 0 13.584 2.64 18.288 7.92 4.8 5.28 7.2 12.384 7.2 21.312v40.752c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-19.44c-1.536 0-2.304-.768-2.304-2.304v-34.704c0-8.736-3.552-13.104-10.656-13.104-7.2 0-10.8 4.368-10.8 13.104v34.704c0 1.536-.768 2.304-2.304 2.304h-19.584zM727.741 237.728c-6.912 0-12.672-1.776-17.28-5.328-4.608-3.648-6.912-9.504-6.912-17.568v-30.816h-8.784c-1.44 0-2.159-.768-2.159-2.304v-13.968c0-1.536.719-2.304 2.159-2.304h8.784v-16.416c0-1.536.768-2.304 2.304-2.304h19.873c1.536 0 2.303.768 2.303 2.304v16.416h10.512c1.536 0 2.304.768 2.304 2.304v13.968c0 1.536-.768 2.304-2.304 2.304h-10.512v28.224c0 1.728.576 3.072 1.728 4.032 1.152.96 2.592 1.44 4.32 1.44 1.632 0 3.12-.048 4.464-.144 1.632 0 2.448.72 2.448 2.16v13.248c0 1.632-1.392 2.832-4.176 3.6-2.688.768-5.712 1.152-9.072 1.152zM777.82 237.728c-11.712 0-21.024-4.08-27.936-12.24-.96-1.056-.768-2.496.576-4.32l6.336-8.928c.96-1.536 2.208-1.824 3.744-.864 6.336 4.224 11.568 6.336 15.696 6.336 3.456 0 5.184-1.152 5.184-3.456 0-1.056-.384-1.92-1.152-2.592-.768-.672-2.256-1.488-4.464-2.448l-9.216-3.6c-10.176-3.936-15.264-10.464-15.264-19.584 0-6.816 2.496-12.24 7.488-16.272 5.088-4.032 11.28-6.048 18.576-6.048 10.176 0 18.48 3.792 24.912 11.376.864.96.816 1.92-.144 2.88l-8.208 9.792c-.768.96-1.872.96-3.312 0-4.704-3.552-8.688-5.328-11.952-5.328-2.976 0-4.464 1.2-4.464 3.6 0 1.92 1.488 3.408 4.464 4.464l11.232 4.464c10.464 4.128 15.648 10.944 15.552 20.448-.096 7.104-2.784 12.624-8.064 16.56-5.28 3.84-11.808 5.76-19.584 5.76zM847.448 236c-1.536 0-2.304-.768-2.304-2.304v-98.352c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728zM906.263 151.76c-2.496 2.496-5.616 3.744-9.36 3.744-3.744 0-6.864-1.248-9.36-3.744-2.496-2.496-3.744-5.616-3.744-9.36 0-3.648 1.248-6.72 3.744-9.216 2.496-2.496 5.616-3.744 9.36-3.744 3.744 0 6.864 1.248 9.36 3.744 2.496 2.496 3.744 5.568 3.744 9.216 0 3.648-1.248 6.768-3.744 9.36zM886.967 236c-1.536 0-2.304-.768-2.304-2.304v-65.952c0-1.536.768-2.304 2.304-2.304h19.872c1.536 0 2.304.768 2.304 2.304v65.952c0 1.536-.768 2.304-2.304 2.304h-19.872zM968.236 237.728c-9.024 0-16.08-3.312-21.168-9.936l-.288 5.904c0 1.536-.768 2.304-2.304 2.304h-17.712c-.672 0-1.248-.192-1.728-.576a2.357 2.357 0 01-.72-1.728v-98.352c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v36c4.608-5.088 11.136-7.632 19.584-7.632 9.6 0 17.472 3.552 23.616 10.656 6.144 7.104 9.218 15.888 9.218 26.352 0 10.56-3.074 19.392-9.218 26.496-6.144 7.008-14.016 10.512-23.616 10.512zm-15.84-26.064c2.688 2.784 6.144 4.176 10.368 4.176s7.728-1.392 10.512-4.176c2.784-2.784 4.176-6.432 4.176-10.944 0-4.512-1.392-8.16-4.176-10.944-2.784-2.784-6.288-4.176-10.512-4.176-4.32 0-7.824 1.392-10.512 4.176-2.592 2.688-3.888 6.288-3.888 10.8 0 4.608 1.344 8.304 4.032 11.088zM1014.79 236c-1.53 0-2.3-.768-2.3-2.304v-65.952c0-1.536.77-2.304 2.3-2.304h19.01c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.69-9.12 7.58-13.68 14.69-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.01 2.256-3.03 1.872-2.4-.48-4.17-.72-5.32-.72-4.42 0-7.92 1.344-10.52 4.032-2.49 2.592-3.74 6.528-3.74 11.808v32.4c0 1.536-.77 2.304-2.3 2.304h-19.59zM1098.25 237.728c-9.6 0-17.47-3.504-23.61-10.512-6.15-7.104-9.22-15.936-9.22-26.496 0-10.464 3.07-19.248 9.22-26.352 6.14-7.104 14.01-10.656 23.61-10.656 9.41 0 16.47 3.264 21.17 9.792l.29-5.76c0-1.536.77-2.304 2.3-2.304h17.86c1.53 0 2.3.768 2.3 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.05.576-1.73.576h-17.71c-1.53 0-2.3-.768-2.3-2.304l-.29-5.904c-5.09 6.624-12.14 9.936-21.17 9.936zm-5.04-26.064c2.79 2.784 6.29 4.176 10.51 4.176 4.23 0 7.68-1.392 10.37-4.176 2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.05-4.176-10.37-4.176-4.22 0-7.72 1.392-10.51 4.176-2.78 2.784-4.17 6.432-4.17 10.944 0 4.512 1.39 8.16 4.17 10.944zM1159.5 236c-1.54 0-2.31-.768-2.31-2.304v-65.952c0-1.536.77-2.304 2.31-2.304h19c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.69-9.12 7.59-13.68 14.69-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.01 2.256-3.02 1.872-2.4-.48-4.18-.72-5.33-.72-4.42 0-7.92 1.344-10.51 4.032-2.5 2.592-3.75 6.528-3.75 11.808v32.4c0 1.536-.76 2.304-2.3 2.304h-19.58zM1229.67 263.36c-2.11 0-2.73-.864-1.87-2.592L1238.17 236l-27.36-68.112c-.58-1.632.05-2.448 1.87-2.448h20.02c1.34 0 2.25.576 2.73 1.728l14.4 40.608 14.55-40.608c.38-1.152 1.29-1.728 2.73-1.728h20.02c1.73 0 2.3.816 1.73 2.448l-37.3 93.744c-.48 1.152-1.39 1.728-2.74 1.728h-19.15z"></path><path fill="url(#hero-a)" d="M141.984 106c-1.536 0-2.304-.768-2.304-2.304v-49.68h-8.352c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.352v-8.784c0-17.28 8.928-25.92 26.784-25.92 4.896 0 9.072.912 12.528 2.736.864.384 1.296 1.152 1.296 2.304v16.128c0 .864-.624 1.2-1.872 1.008-3.456-.576-5.568-.864-6.336-.864-3.072 0-5.184.672-6.336 2.016-1.152 1.248-1.728 3.12-1.728 5.616v5.76h14.112c1.44 0 2.16.768 2.16 2.304v13.968c0 1.536-.72 2.304-2.16 2.304h-14.112v49.68c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-b)" d="M214.941 107.728c-7.392 0-13.488-2.64-18.288-7.92-4.704-5.28-7.056-12.384-7.056-21.312V37.744c0-1.536.768-2.304 2.304-2.304h19.584c1.536 0 2.304.768 2.304 2.304v34.704c0 8.736 3.552 13.104 10.656 13.104 7.2 0 10.8-4.368 10.8-13.104V37.744c0-1.536.768-2.304 2.304-2.304h19.44c.672 0 1.248.24 1.728.72.48.384.72.912.72 1.584v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-18.864c-1.536 0-2.304-.816-2.304-2.448l-.576-7.92c-4.512 8.064-11.28 12.096-20.304 12.096z"></path><path fill="url(#hero-c)" d="M276.558 106c-1.536 0-2.304-.768-2.304-2.304V5.344c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-d)" d="M315.933 106c-1.536 0-2.304-.768-2.304-2.304V5.344c0-1.536.768-2.304 2.304-2.304h19.728c1.536 0 2.304.768 2.304 2.304v98.352c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-e)" d="M367.548 133.36c-2.112 0-2.736-.864-1.872-2.592L376.044 106l-27.36-68.112c-.576-1.632.048-2.448 1.872-2.448h20.016c1.344 0 2.256.576 2.736 1.728l14.4 40.608 14.544-40.608c.384-1.152 1.296-1.728 2.736-1.728h20.016c1.728 0 2.304.816 1.728 2.448l-37.296 93.744c-.48 1.152-1.392 1.728-2.736 1.728h-19.152z"></path><path fill="url(#hero-f)" d="M473.578 106c-1.536 0-2.304-.768-2.304-2.304v-49.68h-8.352c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.352v-8.784c0-17.28 8.928-25.92 26.784-25.92 4.896 0 9.072.912 12.528 2.736.864.384 1.296 1.152 1.296 2.304v16.128c0 .864-.624 1.2-1.872 1.008-3.456-.576-5.568-.864-6.336-.864-3.072 0-5.184.672-6.336 2.016-1.152 1.248-1.728 3.12-1.728 5.616v5.76h14.112c1.44 0 2.16.768 2.16 2.304v13.968c0 1.536-.72 2.304-2.16 2.304H495.61v49.68c0 1.536-.768 2.304-2.304 2.304h-19.728z"></path><path fill="url(#hero-g)" d="M553.806 107.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936z"></path><path fill="url(#hero-h)" d="M625.939 107.728c-9.6 0-17.472-3.504-23.616-10.512-6.144-7.104-9.216-15.936-9.216-26.496 0-10.464 3.072-19.248 9.216-26.352 6.144-7.104 14.016-10.656 23.616-10.656 9.408 0 16.464 3.264 21.168 9.792l.288-5.76c0-1.536.768-2.304 2.304-2.304h17.856c1.536 0 2.304.768 2.304 2.304v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-17.712c-1.536 0-2.304-.768-2.304-2.304l-.288-5.904c-5.088 6.624-12.144 9.936-21.168 9.936zm-5.04-26.064c2.784 2.784 6.288 4.176 10.512 4.176s7.68-1.392 10.368-4.176c2.688-2.784 4.032-6.48 4.032-11.088 0-4.512-1.344-8.112-4.032-10.8-2.592-2.784-6.048-4.176-10.368-4.176-4.224 0-7.728 1.392-10.512 4.176-2.784 2.784-4.176 6.432-4.176 10.944 0 4.512 1.392 8.16 4.176 10.944z"></path><path fill="url(#hero-i)" d="M715.695 107.728c-6.912 0-12.672-1.776-17.28-5.328-4.608-3.648-6.912-9.504-6.912-17.568V54.016h-8.784c-1.44 0-2.16-.768-2.16-2.304V37.744c0-1.536.72-2.304 2.16-2.304h8.784V19.024c0-1.536.768-2.304 2.304-2.304h19.872c1.536 0 2.304.768 2.304 2.304V35.44h10.512c1.536 0 2.304.768 2.304 2.304v13.968c0 1.536-.768 2.304-2.304 2.304h-10.512V82.24c0 1.728.576 3.072 1.728 4.032 1.152.96 2.592 1.44 4.32 1.44 1.632 0 3.12-.048 4.464-.144 1.632 0 2.448.72 2.448 2.16v13.248c0 1.632-1.392 2.832-4.176 3.6-2.688.768-5.712 1.152-9.072 1.152z"></path><path fill="url(#hero-j)" d="M764.785 107.728c-7.392 0-13.488-2.64-18.288-7.92-4.704-5.28-7.056-12.384-7.056-21.312V37.744c0-1.536.768-2.304 2.304-2.304h19.584c1.536 0 2.304.768 2.304 2.304v34.704c0 8.736 3.552 13.104 10.656 13.104 7.2 0 10.8-4.368 10.8-13.104V37.744c0-1.536.768-2.304 2.304-2.304h19.44c.672 0 1.248.24 1.728.72.48.384.72.912.72 1.584v65.952c0 .672-.24 1.248-.72 1.728-.48.384-1.056.576-1.728.576h-18.864c-1.536 0-2.304-.816-2.304-2.448l-.576-7.92c-4.512 8.064-11.28 12.096-20.304 12.096z"></path><path fill="url(#hero-k)" d="M826.401 106c-1.536 0-2.304-.768-2.304-2.304V37.744c0-1.536.768-2.304 2.304-2.304h19.008c1.44 0 2.16.816 2.16 2.448l.72 9.504c2.688-9.12 7.584-13.68 14.688-13.68 2.88 0 5.04.624 6.48 1.872.96.672 1.44 1.728 1.44 3.168v15.552c0 1.632-1.008 2.256-3.024 1.872-2.4-.48-4.176-.72-5.328-.72-4.416 0-7.92 1.344-10.512 4.032-2.496 2.592-3.744 6.528-3.744 11.808v32.4c0 1.536-.768 2.304-2.304 2.304h-19.584z"></path><path fill="url(#hero-l)" d="M916.197 107.728c-11.52 0-20.928-3.456-28.224-10.368-7.296-7.008-10.944-15.984-10.944-26.928 0-10.56 3.36-19.296 10.08-26.208 6.816-7.008 15.648-10.512 26.496-10.512 10.464 0 18.768 3.264 24.912 9.792 6.144 6.528 9.216 14.544 9.216 24.048 0 4.128-.672 7.248-2.016 9.36-1.248 2.016-3.552 3.024-6.912 3.024h-38.16c2.4 5.952 8.256 8.928 17.568 8.928 5.568 0 10.416-1.104 14.544-3.312 1.056-.48 1.92-.192 2.592.864l6.624 9.216c.768 1.152.528 2.256-.72 3.312-5.76 5.856-14.112 8.784-25.056 8.784zm-15.984-44.352h26.064c-1.248-6.624-5.424-9.936-12.528-9.936-7.296 0-11.808 3.312-13.536 9.936z"></path><path fill="url(#hero-m)" d="M988.329 107.728c-9.6 0-17.472-3.504-23.616-10.512-6.144-7.104-9.216-15.936-9.216-26.496 0-10.464 3.072-19.248 9.216-26.352 6.144-7.104 14.016-10.656 23.616-10.656 8.448 0 14.981 2.544 19.581 7.632v-36c0-1.536.77-2.304 2.31-2.304h19.73c1.53 0 2.3.768 2.3 2.304v98.352c0 .672-.24 1.248-.72 1.728-.48.384-1.06.576-1.73.576h-17.71c-1.54 0-2.3-.768-2.3-2.304l-.29-5.904c-5.09 6.624-12.147 9.936-21.171 9.936zm-5.04-26.064c2.784 2.784 6.288 4.176 10.512 4.176s7.679-1.392 10.369-4.176c2.69-2.784 4.03-6.48 4.03-11.088 0-4.512-1.34-8.112-4.03-10.8-2.59-2.784-6.049-4.176-10.369-4.176-4.224 0-7.728 1.392-10.512 4.176-2.784 2.784-4.176 6.432-4.176 10.944 0 4.512 1.392 8.16 4.176 10.944z"></path><defs><linearGradient id="hero-a" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-b" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-c" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-d" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-e" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-f" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-g" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-h" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-i" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-j" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-k" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-l" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient><linearGradient id="hero-m" x1="1011" x2="150.116" y1="30.032" y2="47.652" gradientUnits="userSpaceOnUse"><stop stop-color="#3bc9db"></stop><stop offset="1" stop-color="#228be6"></stop></linearGradient></defs></svg><p class="mantine-focus-auto Jumbotron_description__VWA53 m-b6d8b162 mantine-Text-root">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</p><style data-mantine-styles="inline">.__m__-R1q2ulu6{--sg-spacing-x:calc(1.875rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));--sg-cols:1;}@media(min-width: 62em){.__m__-R1q2ulu6{--sg-cols:3;}}</style><div style="max-width:calc(50rem * var(--mantine-scale));margin-top:calc(2.5rem * var(--mantine-scale))" class="m-2415a157 mantine-SimpleGrid-root __m__-R1q2ulu6"><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-scale" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M7 20l10 0"></path><path d="M6 6l6 -1l6 1"></path><path d="M12 3l0 17"></path><path d="M9 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path><path d="M21 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">Free and open source</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">All packages have MIT license, you can use Mantine in any project</p></div></div><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lifebuoy" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M15 15l3.35 3.35"></path><path d="M9 15l-3.35 3.35"></path><path d="M5.65 5.65l3.35 3.35"></path><path d="M18.35 5.65l-3.35 3.35"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">TypeScript based</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Build type safe applications, all components and hooks export types</p></div></div><div class="Jumbotron_feature__EASBV"><div class="Jumbotron_featureIcon__znyNU"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket" style="width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="Jumbotron_featureBody__L3I2K"><p style="font-weight:500" class="mantine-focus-auto Jumbotron_featureTitle__5BwRd m-b6d8b162 mantine-Text-root">Use anywhere</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm">Mantine supports all modern frameworks: Next.js, Remix, etc.</p></div></div></div><div class="Jumbotron_controls__aRtRk m-4081bf90 mantine-Group-root"><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-radius:var(--mantine-radius-md);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active Jumbotron_control__nxFZw m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xl" data-primary="true" href="/getting-started/"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Get started</span></span></a><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-radius:var(--mantine-radius-md);--button-bg:transparent;--button-hover:var(--mantine-color-blue-outline-hover);--button-color:var(--mantine-color-blue-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-blue-outline)" class="mantine-focus-auto mantine-active Jumbotron_control__nxFZw m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-size="xl" data-with-left-section="true" href="https://github.com/mantinedev/mantine" data-github="true"><span class="m-80f1301b mantine-Button-inner"><span class="m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></span><span class="m-811560b9 mantine-Button-label">GitHub</span></span></a></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(2.5rem * var(--mantine-scale));--waves-width:150%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="DemoTabs_root__pcqcD"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">100+ components</h2><style data-mantine-styles="inline">.__m__-R1a6ulu6{--grid-gutter:0;}</style><div style="margin-top:var(--mantine-spacing-md)" class="m-410352e9 mantine-Grid-root __m__-R1a6ulu6"><div class="m-dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-R6ra6ulu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-R6ra6ulu6{--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-R6ra6ulu6"><div class="DemoTabs_controls__DDfxU"><div style="height:calc(5rem * var(--mantine-scale));transform:translateY(0)" class="DemoTabs_controlsIndicator__ghMr9"></div><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button" data-active="true"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Inputs</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">20+ input components</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Date pickers</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Calendar, date pickers, time inputs</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"></path><path d="M4 12l8 4l8 -4"></path><path d="M4 16l8 4l8 -4"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Overlays &amp; Navigation</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Modal, HoverCard, Tabs, Stepper</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><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"></path><path d="M13 8l2 0"></path><path d="M13 12l2 0"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Content</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Accordion, Timeline</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"></path><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Rich text editor</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Tiptap based rich text editor</p></div></div></button><button class="mantine-focus-auto DemoTabs_control__aTkBm m-87cf2631 mantine-UnstyledButton-root" type="button"><div class="DemoTabs_controlInner__9qK1G"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="DemoTabs_controlIcon__DUulE"><path d="M15 6l.01 0"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M3 13l4 -4a3 5 0 0 1 3 0l4 4"></path><path d="M13 12l2 -2a3 5 0 0 1 3 0l3 3"></path><path d="M8 21l.01 0"></path><path d="M12 21l.01 0"></path><path d="M16 21l.01 0"></path></svg><div><p class="mantine-focus-auto DemoTabs_controlTitle__hxKob m-b6d8b162 mantine-Text-root">Carousel</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);color:var(--mantine-color-dimmed)" class="mantine-focus-auto DemoTabs_controlDescription__zFs9c m-b6d8b162 mantine-Text-root" data-size="sm">Embla based carousel</p></div></div></button></div></div><style data-mantine-styles="inline">.__m__-Rara6ulu6{--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-Rara6ulu6{--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m-96bdd299 mantine-Grid-col __m__-Rara6ulu6"><div class="DemoTabs_demo__qymi8"><style data-mantine-styles="inline">.__m__-Rmqra6ulu6{--sg-spacing-x:var(--mantine-spacing-xl);--sg-spacing-y:var(--mantine-spacing-xl);--sg-cols:1;}@media(min-width: 48em){.__m__-Rmqra6ulu6{--sg-cols:2;}}</style><div style="row-gap:var(--mantine-spacing-md" class="m-2415a157 mantine-SimpleGrid-root __m__-Rmqra6ulu6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-R3dmqra6ulu6" id="mantine-R3dmqra6ulu6-label">Text input<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Text input" required="" aria-invalid="false" id="mantine-R3dmqra6ulu6"/></div></div><div class="m-f61ca620 mantine-PasswordInput-root m-46b77525 mantine-InputWrapper-root mantine-PasswordInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-PasswordInput-label" data-required="true" for="mantine-R5dmqra6ulu6" id="mantine-R5dmqra6ulu6-label">Password input<span class="m-78a94662 mantine-InputWrapper-required mantine-PasswordInput-required" aria-hidden="true"> *</span></label><div style="--input-left-section-pointer-events:none;--input-right-section-pointer-events:all" class="m-6c018570 mantine-Input-wrapper mantine-PasswordInput-wrapper" data-variant="default" data-with-right-section="true"><div class="m-ccf8da4c m-8fb7ebe7 mantine-Input-input mantine-PasswordInput-input" data-variant="default"><input required="" class="m-f2d85dd2 mantine-PasswordInput-innerInput" id="mantine-R5dmqra6ulu6" placeholder="Password input" autoComplete="off" type="password"/></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-PasswordInput-section"><button style="--ai-bg:transparent;--ai-hover:var(--mantine-color-gray-light-hover);--ai-color:var(--mantine-color-gray-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-b1072d44 mantine-PasswordInput-visibilityToggle m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" aria-hidden="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:var(--psi-icon-size);height:var(--psi-icon-size)"><path d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-ColorInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-ColorInput-label" for="mantine-R7dmqra6ulu6" id="mantine-R7dmqra6ulu6-label">Color input</label><div class="m-6c018570 mantine-Input-wrapper mantine-ColorInput-wrapper" data-variant="default" data-with-left-section="true"><div data-position="left" class="m-82577fc2 mantine-Input-section mantine-ColorInput-section"><div style="--cs-size:var(--ci-preview-size)" class="mantine-focus-auto m-c5ccdcab mantine-ColorInput-colorPreview m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:rgba(34, 138, 230, 0.8)"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div></div><input class="m-8fb7ebe7 mantine-Input-input mantine-ColorInput-input" data-variant="default" autoComplete="off" placeholder="What other library has that?" spellcheck="false" aria-invalid="false" id="mantine-R7dmqra6ulu6" value="rgba(34, 138, 230, 0.8)"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-NativeSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-NativeSelect-label" for="mantine-R9dmqra6ulu6" id="mantine-R9dmqra6ulu6-label">Native select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-NativeSelect-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><select class="m-8fb7ebe7 mantine-Input-input mantine-NativeSelect-input" data-variant="default" aria-invalid="false" id="mantine-R9dmqra6ulu6"><option value="React">React</option><option value="Angular">Angular</option><option value="Svelte">Svelte</option><option value="Vue">Vue</option></select><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-NativeSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Rbdmqra6ulu6" id="mantine-Rbdmqra6ulu6-label">Custom select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-pointer="true" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Custom select" readonly="" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rbdmqra6ulu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-Select-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Select-label" for="mantine-Rddmqra6ulu6" id="mantine-Rddmqra6ulu6-label">Searchable select</label><div style="--input-right-section-pointer-events:none" class="m-6c018570 mantine-Input-wrapper mantine-Select-wrapper" data-variant="default" data-with-right-section="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Search me" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rddmqra6ulu6" value=""/><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-Select-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-MultiSelect-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-MultiSelect-label" for="mantine-Rfdmqra6ulu6" id="mantine-Rfdmqra6ulu6-label">Custom multi select</label><div class="m-6c018570 mantine-Input-wrapper mantine-MultiSelect-wrapper" data-variant="default" data-multiline="true" data-with-right-section="true"><div class="m-8fb7ebe7 mantine-Input-input mantine-MultiSelect-input" data-variant="default"><div class="mantine-MultiSelect-pillsList m-1dcfd90b mantine-PillGroup-group"><input class="mantine-MultiSelect-inputField m-45c4369d mantine-PillsInputField-field" data-type="visible" placeholder="Pick all you want" aria-haspopup="listbox" autoComplete="off" id="mantine-Rfdmqra6ulu6" aria-invalid="false" value=""/></div></div><div data-position="right" class="m-82577fc2 mantine-Input-section mantine-MultiSelect-section"><svg class="m-2943220b mantine-ComboboxChevron-chevron" data-combobox-chevron="true" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div><input type="hidden" value=""/><div class="m-46b77525 mantine-InputWrapper-root mantine-Autocomplete-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-Autocomplete-label" for="mantine-Rhdmqra6ulu6" id="mantine-Rhdmqra6ulu6-label">Autocomplete</label><div class="m-6c018570 mantine-Input-wrapper mantine-Autocomplete-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-Autocomplete-input" data-variant="default" placeholder="Enter anything with suggestions" aria-haspopup="listbox" autoComplete="off" aria-invalid="false" id="mantine-Rhdmqra6ulu6" value=""/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rjdmqra6ulu6" id="mantine-Rjdmqra6ulu6-label">With description</label><p class="m-fe47ce59 mantine-InputWrapper-description mantine-TextInput-description" id="mantine-Rjdmqra6ulu6-description">Every input can have description...</p><div style="--input-margin-top:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Additional info is always useful" aria-invalid="false" aria-describedby="mantine-Rjdmqra6ulu6-description" id="mantine-Rjdmqra6ulu6"/></div></div><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Rldmqra6ulu6" id="mantine-Rldmqra6ulu6-label">With error</label><div style="--input-margin-bottom:calc(var(--mantine-spacing-xs) / 2)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-error="true"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" data-error="true" placeholder="Oh-oh" aria-invalid="true" aria-describedby="mantine-Rldmqra6ulu6-error" id="mantine-Rldmqra6ulu6"/></div><p class="m-8f816625 mantine-InputWrapper-error mantine-TextInput-error" id="mantine-Rldmqra6ulu6-error">...and error</p></div></div></div></div></div></div></div></div><div class="Waves_root__AApaY" data-alt="true"><svg style="--waves-height:calc(2.625rem * var(--mantine-scale));--waves-width:220%" class="Waves_waves__izljv" data-flip="true" data-alt="true" data-rotate="true" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z" data-alt="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Dark color scheme</h2><style data-mantine-styles="inline">.__m__-Reqaulu6{--sg-spacing-x:calc(1.875rem * var(--mantine-scale));--sg-spacing-y:calc(1.875rem * var(--mantine-scale));--sg-cols:1;}@media(min-width: 48em){.__m__-Reqaulu6{--sg-spacing-x:calc(3.75rem * var(--mantine-scale));--sg-spacing-y:calc(3.75rem * var(--mantine-scale));--sg-cols:2;}}</style><div style="margin-top:calc(1.875rem * var(--mantine-scale));padding-bottom:calc(3.75rem * var(--mantine-scale))" class="m-2415a157 mantine-SimpleGrid-root __m__-Reqaulu6"><div><img style="--image-radius:var(--mantine-radius-md)" class="DarkTheme_image__CQOZ2 m-9e117634 mantine-Image-root" src="/_next/static/media/dark-theme-image.68c24d76.png" alt="Dark and light theme"/></div><div><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="lg">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.</p><div style="margin-top:var(--mantine-spacing-xl)" class="DarkTheme_codeHighlight__38Rck m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> (
@@ -59,7 +59,7 @@
   <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-white);
   <span class="hljs-attribute">border-width</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">1px</span>);
   <span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--mantine-shadow-sm);
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none;margin-top:calc(0.9375rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active CustomizeStyles_control__x_4S5 m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="md" data-with-right-section="true" href="/styles/styles-api"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">View more examples</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-right" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></span></span></a></div></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(2.75rem * var(--mantine-scale));--waves-width:148%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Flexible theming</h2><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto PageSection_description__uweHt m-b6d8b162 mantine-Text-root" data-size="xl">Extend default theme with any amount of additional colors, replace shadows, radius, spacing, fonts and many other properties to match your design requirements.</p><div style="--group-justify:center;margin-top:var(--mantine-spacing-xl)" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-ocean-blue-filled);--button-hover:var(--mantine-color-ocean-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;font-family:var(--docs-font-primary)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Ocean blue button</span></span></button><div style="--badge-height:var(--badge-height-lg);--badge-padding-x:var(--badge-padding-x-lg);--badge-fz:var(--badge-fz-lg);--badge-bg:var(--mantine-color-bright-pink-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;font-family:var(--docs-font-primary);padding-top:calc(0.1875rem * var(--mantine-scale))" class="m-347db0ec mantine-Badge-root" data-variant="filled" data-size="lg"><span class="m-5add502a mantine-Badge-label" style="display:flex;align-items:center">Bright pink badge</span></div></div><div class="Theming_codeHighlight__QWLjP m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none;margin-top:calc(0.9375rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active CustomizeStyles_control__x_4S5 m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="md" data-with-right-section="true" href="/styles/styles-api/"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">View more examples</span><span class="m-a74036a mantine-Button-section" data-position="right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-right" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></span></span></a></div></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(2.75rem * var(--mantine-scale));--waves-width:148%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Flexible theming</h2><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto PageSection_description__uweHt m-b6d8b162 mantine-Text-root" data-size="xl">Extend default theme with any amount of additional colors, replace shadows, radius, spacing, fonts and many other properties to match your design requirements.</p><div style="--group-justify:center;margin-top:var(--mantine-spacing-xl)" class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-ocean-blue-filled);--button-hover:var(--mantine-color-ocean-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;font-family:var(--docs-font-primary)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Ocean blue button</span></span></button><div style="--badge-height:var(--badge-height-lg);--badge-padding-x:var(--badge-padding-x-lg);--badge-fz:var(--badge-fz-lg);--badge-bg:var(--mantine-color-bright-pink-filled);--badge-color:var(--mantine-color-white);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;font-family:var(--docs-font-primary);padding-top:calc(0.1875rem * var(--mantine-scale))" class="m-347db0ec mantine-Badge-root" data-variant="filled" data-size="lg"><span class="m-5add502a mantine-Badge-label" style="display:flex;align-items:center">Bright pink badge</span></div></div><div class="Theming_codeHighlight__QWLjP m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Badge</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
   <span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;Greycliff CF, sans-serif&#x27;</span>,
@@ -88,4 +88,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Width: {width}, height: {height}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div></div></div></div></div></div></div></div><div class="Waves_root__AApaY" data-alt="true"><svg style="--waves-height:calc(2.625rem * var(--mantine-scale));--waves-width:220%" class="Waves_waves__izljv" data-flip="true" data-alt="true" data-rotate="true" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z" data-alt="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Ready to get started?</h2><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto PageSection_description__uweHt m-b6d8b162 mantine-Text-root" data-size="xl">Mantine works in all modern environments – get started instantly with Next.js, Gatsby.js, Redwood, Vite or Remix by following getting started guide:</p><div style="height:var(--mantine-spacing-xl);min-height:var(--mantine-spacing-xl)" class=""></div><div class="FrameworksGuides_root__fQ6ev"><a class="FrameworkLink_link__TzrW5" href="/guides/next"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div><div class="FrameworkLink_name___1iur">Next.js</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/vite"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:Rlequulu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:Rlequulu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:Rlequulu6:)" 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"></path><path fill="url(#vite-b-:Rlequulu6:)" 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"></path></svg></div><div class="FrameworkLink_name___1iur">Vite</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/remix"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div><div class="FrameworkLink_name___1iur">Remix</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/redwood"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div><div class="FrameworkLink_name___1iur">RedwoodJS</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/gatsby"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div><div class="FrameworkLink_name___1iur">Gatsby</div></a></div><div style="height:var(--mantine-spacing-xl);min-height:var(--mantine-spacing-xl)" class=""></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(3rem * var(--mantine-scale));--waves-width:180%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Join the community</h2><div style="height:var(--mantine-spacing-md);min-height:var(--mantine-spacing-md)" class=""></div><div class="SocialCards_cards__QnIAV"><a class="SocialCards_card__zSACa SocialCards_discord__wJcyB" target="_blank" rel="noreferrer" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards_icon__3BbPj"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg><div><div class="SocialCards_title__XUXj5">Join Discord community</div><div class="SocialCards_description__dGKpR">Ask questions, share feedback, get updates, learn about upcoming features and more</div></div></a><a class="SocialCards_card__zSACa SocialCards_github__M_OHW" target="_blank" rel="noreferrer" href="https://github.com/mantinedev/mantine/discussions"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" fill="currentColor" class="SocialCards_icon__3BbPj"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg><div><div class="SocialCards_title__XUXj5">Start a discussion</div><div class="SocialCards_description__dGKpR">Request new features, ask questions and provide feedback with GitHub discussions</div></div></a><a class="SocialCards_card__zSACa SocialCards_twitter__1NQBv" target="_blank" rel="noreferrer" href="https://twitter.com/mantinedev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards_icon__3BbPj"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg><div><div class="SocialCards_title__XUXj5">Follow on Twitter</div><div class="SocialCards_description__dGKpR">Get notified about new minor and major releases</div></div></a></div><div style="height:calc(7.5rem * var(--mantine-scale));min-height:calc(7.5rem * var(--mantine-scale))" class=""></div></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div></div></div></div></div></div></div></div><div class="Waves_root__AApaY" data-alt="true"><svg style="--waves-height:calc(2.625rem * var(--mantine-scale));--waves-width:220%" class="Waves_waves__izljv" data-flip="true" data-alt="true" data-rotate="true" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z" data-alt="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Ready to get started?</h2><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto PageSection_description__uweHt m-b6d8b162 mantine-Text-root" data-size="xl">Mantine works in all modern environments – get started instantly with Next.js, Gatsby.js, Redwood, Vite or Remix by following getting started guide:</p><div style="height:var(--mantine-spacing-xl);min-height:var(--mantine-spacing-xl)" class=""></div><div class="FrameworksGuides_root__fQ6ev"><a class="FrameworkLink_link__TzrW5" href="/guides/next/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" data-large="true"><path fill="currentColor" d="M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"></path></svg></div><div class="FrameworkLink_name___1iur">Next.js</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/vite/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><defs><linearGradient id="vite-a-:Rlequulu6:" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="vite-b-:Rlequulu6:" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#vite-a-:Rlequulu6:)" 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"></path><path fill="url(#vite-b-:Rlequulu6:)" 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"></path></svg></div><div class="FrameworkLink_name___1iur">Vite</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/remix/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(2.5rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128" data-large="true"><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"></path></svg></div><div class="FrameworkLink_name___1iur">Remix</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/redwood/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 277"><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"></path><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"></path></svg></div><div class="FrameworkLink_name___1iur">RedwoodJS</div></a><a class="FrameworkLink_link__TzrW5" href="/guides/gatsby/"><div class="FrameworkLink_iconWrapper__zKNaZ"><svg style="--icon-size:calc(1.75rem * var(--mantine-scale))" class="FrameworkLink_icon__8u0zI" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><rect width="250" height="250" x="3" y="3" fill="#fff" rx="125"></rect><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"></path></svg></div><div class="FrameworkLink_name___1iur">Gatsby</div></a></div><div style="height:var(--mantine-spacing-xl);min-height:var(--mantine-spacing-xl)" class=""></div></div></div><div class="Waves_root__AApaY"><svg style="--waves-height:calc(3rem * var(--mantine-scale));--waves-width:180%" class="Waves_waves__izljv" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 3V0H0v27.35a600.21 600.21 0 00321.39 29.09z"></path></svg></div><div class="PageSection_wrapper__vDE1Z"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><h2 data-type="default" class="SectionTitle_title__Gl8Hg">Join the community</h2><div style="height:var(--mantine-spacing-md);min-height:var(--mantine-spacing-md)" class=""></div><div class="SocialCards_cards__QnIAV"><a class="SocialCards_card__zSACa SocialCards_discord__wJcyB" target="_blank" rel="noreferrer" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards_icon__3BbPj"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg><div><div class="SocialCards_title__XUXj5">Join Discord community</div><div class="SocialCards_description__dGKpR">Ask questions, share feedback, get updates, learn about upcoming features and more</div></div></a><a class="SocialCards_card__zSACa SocialCards_github__M_OHW" target="_blank" rel="noreferrer" href="https://github.com/mantinedev/mantine/discussions"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" fill="currentColor" class="SocialCards_icon__3BbPj"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg><div><div class="SocialCards_title__XUXj5">Start a discussion</div><div class="SocialCards_description__dGKpR">Request new features, ask questions and provide feedback with GitHub discussions</div></div></a><a class="SocialCards_card__zSACa SocialCards_twitter__1NQBv" target="_blank" rel="noreferrer" href="https://twitter.com/mantinedev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1.875rem * var(--mantine-scale));height:calc(1.875rem * var(--mantine-scale))" class="SocialCards_icon__3BbPj"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg><div><div class="SocialCards_title__XUXj5">Follow on Twitter</div><div class="SocialCards_description__dGKpR">Get notified about new minor and major releases</div></div></a></div><div style="height:calc(7.5rem * var(--mantine-scale));min-height:calc(7.5rem * var(--mantine-scale))" class=""></div></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/carousel.html b/others/carousel/index.html
similarity index 88%
rename from others/carousel.html
rename to others/carousel/index.html
index b60d8b1dabd..edb6983d1b1 100644
--- a/others/carousel.html
+++ b/others/carousel/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/9077-a05e7f12524f0a6d.js" defer=""></script><script src="/_next/static/chunks/pages/others/carousel-9f469c680cff716a.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Carousel</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Embla based carousel component</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-carousel/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/carousel.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/carousel"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/carousel</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/213-b3723d19cd82f7df.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/9077-a05e7f12524f0a6d.js" defer=""></script><script src="/_next/static/chunks/pages/others/carousel-9f469c680cff716a.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Carousel</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Embla based carousel component</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-carousel/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/carousel.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/carousel"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/carousel</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add embla-carousel-react @mantine/carousel</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/carousel/styles.css&#x27;</span>;</code></pre></div></div></div></div>
@@ -55,7 +55,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="responsive-styles" data-heading="Responsive styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-styles">Responsive styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideSize</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideGap</code> props work the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>,
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideSize</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">slideGap</code> props work the same way as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>,
 you can pass an object with values for different breakpoints:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-Rajldarblu6{--carousel-slide-gap:0;--carousel-slide-size:100%;}@media(min-width: 48em){.__m__-Rajldarblu6{--carousel-slide-gap:var(--mantine-spacing-md);--carousel-slide-size:50%;}}@media(min-width: 62em){.__m__-Rajldarblu6{--carousel-slide-size:33.333333%;}}</style><div style="--carousel-height:calc(12.5rem * var(--mantine-scale));--carousel-control-size:calc(1.625rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm)" class="m-17884d0f mantine-Carousel-root __m__-Rajldarblu6" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m-a2dae653 mantine-Carousel-viewport"><div class="m-fcd81474 mantine-Carousel-container" data-orientation="horizontal"><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">1</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">2</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">3</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">4</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">5</div></div><div class="m-d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);height:100%;width:100%;display:flex;justify-content:center;align-items:center;font-size:calc(3.125rem * var(--mantine-scale));font-weight:bold" class="">6</div></div></div></div><div class="m-71ea3ab1 mantine-Carousel-indicators"></div><div class="m-39bc3463 mantine-Carousel-controls"><button class="mantine-focus-auto m-64f58e10 mantine-Carousel-control m-87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m-64f58e10 mantine-Carousel-control m-87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Carousel</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/carousel&#x27;</span>;
 
@@ -219,7 +219,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Carousel</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Carousel</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> documentation to learn more.</p>
+<div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2><p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Carousel</code> supports<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>, you can add styles to any inner element of the component with<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop. Follow<!-- --> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> documentation to learn more.</p>
 <style>/*
  * Hover over selectors to apply outline styles
  *
@@ -480,4 +480,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Modal</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/spotlight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spotlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/dropzone"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dropzone</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/carousel","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/spotlight/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spotlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/dropzone/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dropzone</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/carousel","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/code-highlight.html b/others/code-highlight/index.html
similarity index 77%
rename from others/code-highlight.html
rename to others/code-highlight/index.html
index 975851ac0ba..f3fdbf63a2d 100644
--- a/others/code-highlight.html
+++ b/others/code-highlight/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/code-highlight-e7c1cfe8d37c7e48.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CodeHighlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight code with highlight.js</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-code-highlight/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/code-highlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/code-highlight"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/code-highlight</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/code-highlight-e7c1cfe8d37c7e48.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">CodeHighlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Highlight code with highlight.js</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-code-highlight/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/code-highlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/code-highlight"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/code-highlight</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/code-highlight</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/code-highlight/styles.css&#x27;</span>;</code></pre></div></div></div></div>
@@ -411,4 +411,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">InlineCodeHighlight</span> <span class="hljs-attr">code</span>=<span class="hljs-string">&quot;import React from &#x27;react&#x27;;&quot;</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&quot;tsx&quot;</span> /&gt;</span>. Is not that cool?
     <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/time-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TimeInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/notifications"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notifications system</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/code-highlight","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/dates/time-input/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">TimeInput</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/notifications/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notifications system</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/code-highlight","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/dropzone.html b/others/dropzone/index.html
similarity index 80%
rename from others/dropzone.html
rename to others/dropzone/index.html
index 742b11dd9b6..549410d1531 100644
--- a/others/dropzone.html
+++ b/others/dropzone/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/297e354fa1f5a8f9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/297e354fa1f5a8f9.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/761-35955f10110e3a96.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/dropzone-2f5faa4a1e839679.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Dropzone</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture files from user with drag and drop</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dropzone/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/dropzone.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dropzone"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dropzone</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/297e354fa1f5a8f9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/297e354fa1f5a8f9.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/761-35955f10110e3a96.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/dropzone-2f5faa4a1e839679.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Dropzone</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Capture files from user with drag and drop</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-dropzone/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/dropzone.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/dropzone"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/dropzone</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/dropzone</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/dropzone/styles.css&#x27;</span>;</code></pre></div></div></div></div>
@@ -68,7 +68,7 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dropzone.Idle</code> is visible when the user does not drag anything over dropzone</li>
 </ul>
 <div id="loading-state" data-heading="Loading state" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#loading-state">Loading state</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop to indicate loading state with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay">LoadingOverlay</a> component.
+<p class="MdxTypography_paragraph__Lp7wh">Set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> prop to indicate loading state with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/loading-overlay/">LoadingOverlay</a> component.
 When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">loading</code> props is true user cannot drop or select new files (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Dropzone</code> becomes disabled):</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--dropzone-radius:var(--mantine-radius-default);--dropzone-accept-color:var(--mantine-color-blue-light-color);--dropzone-accept-bg:var(--mantine-color-blue-light);--dropzone-reject-color:var(--mantine-color-red-light-color);--dropzone-reject-bg:var(--mantine-color-red-light)" class="mantine-focus-auto m-d46a4834 mantine-Dropzone-root" data-variant="light" data-idle="true" data-loading="true" data-activate-on-click="true" role="presentation"><div style="--lo-z-index:400" class="m-6e45937b mantine-LoadingOverlay-root"><span class="m-b34414df m-e8eb006c mantine-LoadingOverlay-loader m-5ae2e3c mantine-Loader-root"></span><div style="--overlay-bg:rgba(255, 255, 255, 0.75);--overlay-z-index:200" class="m-df587f17 mantine-LoadingOverlay-overlay m-9814e45f mantine-Overlay-root" data-light="true"></div><div style="--overlay-bg:rgba(44, 46, 51, 0.75);--overlay-z-index:200" class="m-df587f17 mantine-LoadingOverlay-overlay m-9814e45f mantine-Overlay-root" data-dark="true"></div></div><input accept="image/png,image/gif,image/jpeg,image/svg+xml,image/webp,image/avif" multiple="" type="file" style="display:none" tabindex="-1"/><div class="m-b85f7144 mantine-Dropzone-inner"><div style="--group-gap:var(--mantine-spacing-xl);--group-justify:center;pointer-events:none;min-height:calc(13.75rem * var(--mantine-scale))" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-photo" style="width:calc(3.25rem * var(--mantine-scale));height:calc(3.25rem * var(--mantine-scale));color:var(--mantine-color-dimmed)"><path d="M15 8h.01"></path><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path></svg><div><p style="--text-fz:var(--mantine-font-size-xl);--text-lh:var(--mantine-line-height-xl)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xl" data-inline="true">Drag images here or click to select files</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);margin-top:calc(0.4375rem * var(--mantine-scale));color:var(--mantine-color-dimmed)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="sm" data-inline="true">Attach as many files as you like, each file should not exceed 5mb</p></div></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Dropzone</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/dropzone&#x27;</span>;
 
@@ -296,4 +296,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Dropzone.FullScreen</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/carousel"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Carousel</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/nprogress"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavigationProgress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/dropzone","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/carousel/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Carousel</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/nprogress/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavigationProgress</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/dropzone","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/modals.html b/others/modals/index.html
similarity index 73%
rename from others/modals.html
rename to others/modals/index.html
index e8675293e29..8d7a9827245 100644
--- a/others/modals.html
+++ b/others/modals/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/modals-3796bd3b5eb149dd.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Modals manager</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Centralized modals manager with option to handle state of multi-step modals</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-modals/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/modals.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/modals"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/modals</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/modals-3796bd3b5eb149dd.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Modals manager</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Centralized modals manager with option to handle state of multi-step modals</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-modals/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/modals.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/modals"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/modals</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/modals</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="setup-modalsprovider" data-heading="Setup ModalsProvider" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup-modalsprovider">Setup ModalsProvider</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Wrap your app with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ModalsProvider</code> component:</p>
@@ -52,7 +52,7 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">closeOnCancel</code> – should modal be closed when cancel button is clicked, defaults to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">true</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cancelProps</code> – cancel button props</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">confirmProps</code> – confirm button props</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">groupProps</code> – buttons <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group">Group</a> props</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">groupProps</code> – buttons <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/group/">Group</a> props</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">labels</code> – cancel and confirm buttons labels, can be defined on ModalsProvider</li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">Using this properties you can customize confirm modal to match current context requirements:</p>
@@ -241,4 +241,4 @@
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">Use internal component state, or</li>
 <li class="MdxTypography_li__JpNrx">Use the modal component instead of modals manager</li>
-</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/nprogress"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavigationProgress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/tiptap"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rich text editor</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/modals","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/nprogress/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">NavigationProgress</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/tiptap/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Rich text editor</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/modals","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/notifications.html b/others/notifications/index.html
similarity index 79%
rename from others/notifications.html
rename to others/notifications/index.html
index fa2eb6604a2..40098dff2d3 100644
--- a/others/notifications.html
+++ b/others/notifications/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/notifications-8bdaa14feb703f1c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Notifications system</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Mantine notifications system</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-notifications/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/notifications.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/notifications"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/notifications</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/notifications-8bdaa14feb703f1c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Notifications system</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Mantine notifications system</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-notifications/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/notifications.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/notifications"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/notifications</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/notifications</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/notifications/styles.css&#x27;</span>;</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> component anywhere in your application. Note that:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">It is required to render <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> component inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a></li>
+<li class="MdxTypography_li__JpNrx">It is required to render <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> component inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a></li>
 <li class="MdxTypography_li__JpNrx">You do not need to wrap your application with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> component – it is not a provider, it is a regular component</li>
 <li class="MdxTypography_li__JpNrx">You should not render multiple <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> components – if you do that, your notifications will be duplicated</li>
 </ul>
@@ -75,7 +75,7 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">onOpen</code> – calls when notification is mounted</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">autoClose</code> – defines timeout in ms on which notification will be automatically closed, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">false</code> to disable auto close</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">message</code> – required notification body</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">color, icon, title, radius, className, style, loading</code> – props passed down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/notification">Notification</a> component</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">color, icon, title, radius, className, style, loading</code> – props passed down to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/notification/">Notification</a> component</li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">All properties except <code class="m-b183c0a2 mantine-Code-root" dir="ltr">message</code> are optional.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconX</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
@@ -110,8 +110,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="customize-notification-styles" data-heading="Customize notification styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#customize-notification-styles">Customize notification styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> props to customize notification styles.
-Usually, it is better to override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/notification">Notification</a> styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> props to customize notification styles.
+Usually, it is better to override <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/notification/">Notification</a> styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Default notification</span></span></button><button style="--button-bg:var(--mantine-color-red-filled);--button-hover:var(--mantine-color-red-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Error notification</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { notifications } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/notifications&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -133,7 +133,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="notifications-container-position" data-heading="Notifications container position" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#notifications-container-position">Notifications container position</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> container has fixed position inside, it is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal">Portal</a> by default.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> container has fixed position inside, it is rendered inside <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal/">Portal</a> by default.
 Position cannot be changed per notification. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Notifications</code> supports the following positions:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">top-left</code></li>
@@ -318,4 +318,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/code-highlight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CodeHighlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/spotlight"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spotlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/notifications","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/code-highlight/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CodeHighlight</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/spotlight/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Spotlight</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/notifications","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/nprogress.html b/others/nprogress/index.html
similarity index 60%
rename from others/nprogress.html
rename to others/nprogress/index.html
index 019512f8fa8..4f6e61c5ef3 100644
--- a/others/nprogress.html
+++ b/others/nprogress/index.html
@@ -3,12 +3,12 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/nprogress-9339f0c6d1d60119.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NavigationProgress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Navigation progress bar</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-nprogress/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/nprogress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/nprogress"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/nprogress</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/nprogress-9339f0c6d1d60119.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">NavigationProgress</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Navigation progress bar</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-nprogress/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/nprogress.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/nprogress"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/nprogress</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/nprogress</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/nprogress/styles.css&#x27;</span>;</code></pre></div></div></div></div>
 <div id="setup-navigationprogress" data-heading="Setup NavigationProgress" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#setup-navigationprogress">Setup NavigationProgress</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Render <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NavigationProgress</code> anywhere in your app within <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Render <code class="m-b183c0a2 mantine-Code-root" dir="ltr">NavigationProgress</code> anywhere in your app within <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">NavigationProgress</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/nprogress&#x27;</span>;
 
@@ -39,4 +39,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/dropzone"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dropzone</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/modals"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modals manager</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/nprogress","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/dropzone/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Dropzone</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/modals/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modals manager</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/nprogress","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/spotlight.html b/others/spotlight/index.html
similarity index 77%
rename from others/spotlight.html
rename to others/spotlight/index.html
index ad69ecd75b9..d70351a2e79 100644
--- a/others/spotlight.html
+++ b/others/spotlight/index.html
@@ -3,14 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/spotlight-0f7a2d72c079d247.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Spotlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Command center for your application</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-spotlight/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/spotlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/spotlight"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/spotlight</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/others/spotlight-0f7a2d72c079d247.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Spotlight</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Command center for your application</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-spotlight/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/spotlight.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/spotlight"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/spotlight</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/spotlight</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/spotlight/styles.css&#x27;</span>;</code></pre></div></div></div></div>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code> component can be used as a search or as a command center of your application.
 It is used as a search on mantine.dev website, you can trigger it with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Ctrl + K</code> shortcut.
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal">Modal</a> component and supports most of its props.</p>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code> is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/modal/">Modal</a> component and supports most of its props.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Open spotlight</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { rem, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">Spotlight</span>, <span class="hljs-title class_">SpotlightActionData</span>, spotlight } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/spotlight&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconHome</span>, <span class="hljs-title class_">IconDashboard</span>, <span class="hljs-title class_">IconFileText</span>, <span class="hljs-title class_">IconSearch</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
@@ -100,7 +100,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="keyboard-shortcuts" data-heading="Keyboard shortcuts" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#keyboard-shortcuts">Keyboard shortcuts</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-hotkeys">use-hotkeys</a> hook to handle keyboard shortcuts.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">Spotlight</code> uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-hotkeys/">use-hotkeys</a> hook to handle keyboard shortcuts.
 By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Ctrl + K</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Cmd + K</code> shortcuts are used to open spotlight, you can change them
 with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">shortcut</code> prop:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Spotlight</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/spotlight&#x27;</span>;
@@ -164,7 +164,7 @@
 <li class="MdxTypography_li__JpNrx">When the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scrollable</code> prop is set, actions list height will always equal to the value of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxHeight</code> prop
 (it will not shrink if there are not enough actions to fill the space). When there are more
 actions than can fit into the list, it will become scrollable. Scrolling logic is handled
-by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area">ScrollArea</a> component.</li>
+by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/scroll-area/">ScrollArea</a> component.</li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">In other words, if you want the actions list to shrink, do not set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scrollable</code> prop and use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">limit</code>
 prop. If you want the actions list to always have a fixed height, set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scrollable</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">maxHeight</code> props.</p>
@@ -363,4 +363,4 @@
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{RemoveScroll.classNames.fullWidth}</span> /&gt;</span></span>
 
 <span class="hljs-comment">// to make &quot;right: 0&quot;</span>
-<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{RemoveScroll.classNames.zeroRight}</span> /&gt;</span></span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/notifications"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notifications system</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/carousel"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Carousel</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/spotlight","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{RemoveScroll.classNames.zeroRight}</span> /&gt;</span></span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/notifications/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Notifications system</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/carousel/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Carousel</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/spotlight","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/others/tiptap.html b/others/tiptap/index.html
similarity index 87%
rename from others/tiptap.html
rename to others/tiptap/index.html
index 665472bab3e..59da737434b 100644
--- a/others/tiptap.html
+++ b/others/tiptap/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/849baa33-4b0f9eb87903687b.js" defer=""></script><script src="/_next/static/chunks/2085-bfeaa2af84065661.js" defer=""></script><script src="/_next/static/chunks/2799-aa8381ffc0207c6d.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/2381-9c97f560cddb868b.js" defer=""></script><script src="/_next/static/chunks/pages/others/tiptap-16018d3dff2c9bf3.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/tiptap">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Rich text editor</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tiptap based rich text editor</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-tiptap/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/tiptap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/tiptap"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/tiptap</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/849baa33-4b0f9eb87903687b.js" defer=""></script><script src="/_next/static/chunks/2085-bfeaa2af84065661.js" defer=""></script><script src="/_next/static/chunks/2799-aa8381ffc0207c6d.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/2381-9c97f560cddb868b.js" defer=""></script><script src="/_next/static/chunks/pages/others/tiptap-16018d3dff2c9bf3.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/code-highlight/">CodeHighlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/notifications/">Notifications system</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/spotlight/">Spotlight</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/carousel/">Carousel</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/dropzone/">Dropzone</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/nprogress/">NavigationProgress</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/others/modals/">Modals manager</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/others/tiptap/">Rich text editor</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="MdxPageHeader_wrapper__wbUkJ"><div class="MdxPageHeader_header__a3OS_" data-with-tabs="true"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxPageHeader_title__mVX38 m-8a5d1357 mantine-Title-root" data-order="1">Rich text editor</h1><p class="mantine-focus-auto MdxPageHeader_description__DXRa0 m-b6d8b162 mantine-Text-root">Tiptap based rich text editor</p><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Source</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/src/mantine-tiptap/src"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></div>View source code</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Docs</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/rtivital/mantine/blob/master/docs/pages/others/tiptap.mdx"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pencil" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path><path d="M13.5 6.5l4 4"></path></svg></div>Edit this page</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">Package</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.npmjs.com/package/@mantine/tiptap"><div class="LinkItem_icon__wR7T_"><svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></div>@mantine/tiptap</a></div></div><div class="HeaderItem_item__LcWUO"><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto HeaderItem_label__znocC m-b6d8b162 mantine-Text-root">License</p><div class="LinkItem_wrapper__2QzLk"><a style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-849cf0da LinkItem_link__RV3VR m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/mantinedev/mantine/blob/master/LICENSE"><div class="LinkItem_icon__wR7T_"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-license" style="width:calc(0.875rem * var(--mantine-scale));height:calc(0.875rem * var(--mantine-scale))"><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg></div>MIT</a></div></div></div></div><div class="PageBase_content__4g1iM"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="m-89d60db1 mantine-Tabs-root" data-variant="outline" data-orientation="horizontal" id="mantine-R3blu6"><div class="MdxTabs_tabsWrapper__rdFxc"><div class="m-6772fbd5 MdxTabs_tabsList__y8PQm m-89d33d6d mantine-Tabs-list" data-variant="outline" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-docs" aria-selected="true" tabindex="0" aria-controls="mantine-R3blu6-panel-docs"><span class="mantine-Tabs-tabLabel">Documentation</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-props" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-props"><span class="mantine-Tabs-tabLabel">Props</span></button><button class="mantine-focus-auto m-b59ab47c MdxTabs_tab__14YSU m-4ec4dce6 mantine-Tabs-tab m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" data-orientation="horizontal" type="button" role="tab" id="mantine-R3blu6-tab-styles-api" aria-selected="false" tabindex="-1" aria-controls="mantine-R3blu6-panel-styles-api"><span class="mantine-Tabs-tabLabel">Styles API</span></button></div></div><div class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-docs" aria-labelledby="mantine-R3blu6-tab-docs"><div class="MdxTabs_tabContent__lVfDY" style="display:flex;position:relative;justify-content:space-between"><div class="MdxTabs_main__IBJa3"><div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Install with yarn:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @mantine/tiptap @mantine/core @mantine/hooks @tabler/icons-react @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">After installation import package styles at the root of your application:</p>
@@ -180,7 +180,7 @@
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add @tiptap/extension-color @tiptap/extension-text-style</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">You can use the following controls to change text color:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor.ColorPicker</code> – allows to pick colors from given predefined color swatches and with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker">ColorPicker</a> component</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor.ColorPicker</code> – allows to pick colors from given predefined color swatches and with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/color-picker/">ColorPicker</a> component</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor.Color</code> – allows to apply given color with one click</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor.UnsetColor</code> – clears color styles</li>
 </ul>
@@ -313,7 +313,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="typography-styles" data-heading="Typography styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#typography-styles">Typography styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor</code> renders content with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider">TypographyStylesProvider</a> and some additional styles.
+<p class="MdxTypography_paragraph__Lp7wh">By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">RichTextEditor</code> renders content with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider/">TypographyStylesProvider</a> and some additional styles.
 You can disable these styles by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">withTypographyStyles={false}</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">RichTextEditor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/tiptap&#x27;</span>;
 <span class="hljs-keyword">import</span> { useEditor } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tiptap/react&#x27;</span>;
@@ -331,8 +331,8 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">RichTextEditor</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Then you will be able to add your own styles either with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/global-styles">global styles</a>
-or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Then you will be able to add your own styles either with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/global-styles/">global styles</a>
+or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// ...</span>
 &lt;<span class="hljs-title class_">RichTextEditor</span>
   editor={editor}
@@ -757,4 +757,4 @@
   <span class="hljs-attr">colorPickerPalette</span>: <span class="hljs-string">&#x27;Color palette&#x27;</span>,
   <span class="hljs-attr">colorPickerSave</span>: <span class="hljs-string">&#x27;Save&#x27;</span>,
   <span class="hljs-attr">colorPickerColorLabel</span>: <span class="hljs-function">(<span class="hljs-params">color</span>) =&gt;</span> <span class="hljs-string">`Set text color <span class="hljs-subst">${color}</span>`</span>,
-};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/modals"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modals manager</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/7-0-0"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Version v7.0.0</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/tiptap","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+};</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/others/modals/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Modals manager</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/changelog/7-0-0/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Version v7.0.0</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxTabs_tableOfContents__NliQC"></div></div></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-props" aria-labelledby="mantine-R3blu6-tab-props"></div><div style="display:none" class="m-b0c91715 mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R3blu6-panel-styles-api" aria-labelledby="mantine-R3blu6-tab-styles-api"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/others/tiptap","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/overview.html b/overview/index.html
similarity index 86%
rename from overview.html
rename to overview/index.html
index 66701016dcb..0d79d79e531 100644
--- a/overview.html
+++ b/overview/index.html
@@ -3,17 +3,17 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/e5f75161ef22fdc6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f75161ef22fdc6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/overview-e68183f5eb291db4.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">API overview</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/e5f75161ef22fdc6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f75161ef22fdc6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/overview-e68183f5eb291db4.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">API overview</h1>
 <p class="MdxTypography_paragraph__Lp7wh">This guide will help you get familiar with core Mantine concepts.
-Please read this guide, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theming</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">styles</a> sections before starting development
+Please read this guide, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theming</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">styles</a> sections before starting development
 to learn about all of the available theming and styling features.</p>
 <div id="mantineprovider" data-heading="MantineProvider" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#mantineprovider">MantineProvider</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> is required to be rendered at the root of your application.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> is required to be rendered at the root of your application.
 It is responsible for:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">Providing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> context</li>
-<li class="MdxTypography_li__JpNrx">Adding <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> to the document</li>
-<li class="MdxTypography_li__JpNrx">Managing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">color scheme</a> (light, dark, auto)</li>
+<li class="MdxTypography_li__JpNrx">Providing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> context</li>
+<li class="MdxTypography_li__JpNrx">Adding <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> to the document</li>
+<li class="MdxTypography_li__JpNrx">Managing <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">color scheme</a> (light, dark, auto)</li>
 </ul>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -25,9 +25,9 @@
   );
 }</code></pre></div></div></div></div>
 <div id="theme-object" data-heading="Theme object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theme-object">Theme object</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">Theme object</a> stores design tokens, components default props, context styles
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">Theme object</a> stores design tokens, components default props, context styles
 and other data that can be accessed by any Mantine component. Most of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> values are exposed as
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> and can be accessed both in JavaScript and CSS.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> and can be accessed both in JavaScript and CSS.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-comment">// Your theme configuration is merged with default theme</span>
@@ -67,20 +67,20 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{style}</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="colors" data-heading="Colors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors">Colors</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors">Colors</a> are stored in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors</code> object and are exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/">Colors</a> are stored in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors</code> object and are exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>.
 Each color must have at least 10 shades. You can generate new colors based on a single color value
-with the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator">colors generator</a>.</p>
+with the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator/">colors generator</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Colors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">blue</code>
 color from the default theme:</p>
 <div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e7f5ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e7f5ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d0ebff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d0ebff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a5d8ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a5d8ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#74c0fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#74c0fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4dabf7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4dabf7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#339af0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#339af0</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#228be6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#228be6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1c7ed6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1c7ed6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1971c2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1971c2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1864ab"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1864ab</p></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">To access colors in styles use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">To access colors in styles use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--mantine-color-blue-<span class="hljs-number">9</span>);
   <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mantine-color-blue-<span class="hljs-number">0</span>);
 }</code></pre></div></div></div></div>
 <div id="css-modules" data-heading="CSS modules" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#css-modules">CSS modules</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All Mantine components use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> for styling.
-It is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> in your project as well, but it is not required –
+<p class="MdxTypography_paragraph__Lp7wh">All Mantine components use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> for styling.
+It is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> in your project as well, but it is not required –
 Mantine components are fully compatible with any third-party styling solution and native CSS.</p>
 <p class="MdxTypography_paragraph__Lp7wh">CSS modules are available in most modern frameworks out of the box. To use them, create a file with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.module.css</code> extension:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">/* Button.module.css */</span>
@@ -98,10 +98,10 @@
   );
 }</code></pre></div></div></div></div>
 <div id="postcss-preset" data-heading="PostCSS preset" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#postcss-preset">PostCSS preset</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> provides several CSS functions and mixins to simplify your styles.
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> provides several CSS functions and mixins to simplify your styles.
 It is not required to use it, but highly recommended. All demos that feature styles
 assume that you have this preset installed.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> allows you to use functions and mixins in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> allows you to use functions and mixins in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">padding</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">20px</span>); <span class="hljs-comment">/* Convert px to rem */</span>
 
@@ -129,20 +129,20 @@
   }
 }</code></pre></div></div></div></div>
 <div id="vanilla-extract" data-heading="Vanilla extract" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#vanilla-extract">Vanilla extract</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract">Vanilla extract</a> is a good alternative to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> if you
-prefer to write styles in JavaScript. Mantine provides <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract">Vanilla extract</a> integration
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract/">Vanilla extract</a> is a good alternative to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> if you
+prefer to write styles in JavaScript. Mantine provides <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/vanilla-extract/">Vanilla extract</a> integration
 with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/vanilla-extract</code> package.</p>
 <div id="css-variables" data-heading="CSS variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#css-variables">CSS variables</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">Theme</a> values are converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> and are available to
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">Theme</a> values are converted to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> and are available to
 use in your styles. All Mantine CSS variables are prefixed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-</code>, for example:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamily</code> → <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors.blue[9]</code> → <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-9</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.spacing.xl</code> → <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xl</code></li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Most of Mantine components have associated <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">CSS variables</a> that can be
-customized in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> or inline with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> prop. Example of customizing
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> CSS variables to add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xxl</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xxs</code> sizes:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Most of Mantine components have associated <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">CSS variables</a> that can be
+customized in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> or inline with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> prop. Example of customizing
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> CSS variables to add new <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xxl</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xxs</code> sizes:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-height:calc(3.75rem * var(--mantine-scale));--button-padding-x:calc(1.875rem * var(--mantine-scale));--button-fz:calc(1.5rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxl" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXL Button</span></span></button><button style="--button-height:calc(1.5rem * var(--mantine-scale));--button-padding-x:calc(0.625rem * var(--mantine-scale));--button-fz:calc(0.625rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXS Button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>MantineProvider.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Inline.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, rem, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -186,14 +186,14 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="styles-api" data-heading="Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api">Styles API</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> is a set of props and techniques that allows you to customize styles of any element
-inside Mantine component inline or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. All Mantine components that
-have styles support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> is a set of props and techniques that allows you to customize styles of any element
+inside Mantine component inline or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. All Mantine components that
+have styles support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Every Mantine component has a set of elements names that can be used to
 apply styles to inner elements inside the component.
-Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a> component selectors:</p>
+Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a> component selectors:</p>
 <div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Selector</th><th class="m-4e7aa4f3 mantine-Table-th">Static selector</th><th class="m-4e7aa4f3 mantine-Table-th">Description</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">wrapper</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->wrapper</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Root element of the Input</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">input</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->input</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Input element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">section</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->section</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Left and right sections</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->root</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Root element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">label</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->label</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Label element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">required</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->required</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Required asterisk element, rendered inside label</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">description</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->description</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Description element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">error</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->error</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Error element</span></td></tr></tbody></table></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">These selectors can be used to apply styles to inner elements with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">classNames or styles</a> props:</p>
+<p class="MdxTypography_paragraph__Lp7wh">These selectors can be used to apply styles to inner elements with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">classNames or styles</a> props:</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(22.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-bf550b40 m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-2af14056 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Raqdbblu6" id="mantine-Raqdbblu6-label">Floating label input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-2acd192c m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" aria-invalid="false" id="mantine-Raqdbblu6" value=""/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -220,9 +220,9 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="color-scheme" data-heading="Color scheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#color-scheme">Color scheme</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">All Mantine components support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">color schemes</a>. By default,
+<p class="MdxTypography_paragraph__Lp7wh">All Mantine components support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">color schemes</a>. By default,
 the color scheme is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>, it can be changed by the user and will be persisted in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">localStorage</code>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">You can use configure the default color scheme on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can use configure the default color scheme on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -232,7 +232,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">And use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">useMantineColorScheme hook</a> to create color scheme toggle control:</p>
+<p class="MdxTypography_paragraph__Lp7wh">And use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">useMantineColorScheme hook</a> to create color scheme toggle control:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-xl);--ai-bg:var(--mantine-color-default);--ai-hover:var(--mantine-color-default-hover);--ai-color:var(--mantine-color-default-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xl" type="button" aria-label="Toggle color scheme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-42f1bae m-81e13c81"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-42f1bae m-42cceab"><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"></path></svg></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, useMantineColorScheme, useComputedColorScheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconSun</span>, <span class="hljs-title class_">IconMoon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
 <span class="hljs-keyword">import</span> cx <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;clsx&#x27;</span>;
@@ -255,10 +255,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="unstyled-components" data-heading="Unstyled components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#unstyled-components">Unstyled components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can use Mantine as a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled">headless UI library</a>. To do that, simply do not import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*/styles.css</code>
-in your application. Then you will be able to apply styles to Mantine components using the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>
+<p class="MdxTypography_paragraph__Lp7wh">You can use Mantine as a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled/">headless UI library</a>. To do that, simply do not import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*/styles.css</code>
+in your application. Then you will be able to apply styles to Mantine components using the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>
 with a styling solution of your choice.</p>
-<p class="MdxTypography_paragraph__Lp7wh">All components also support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled">unstyled prop</a>
+<p class="MdxTypography_paragraph__Lp7wh">All components also support <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/unstyled/">unstyled prop</a>
 that removes all library styles from the component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="mantine-Tabs-root" data-variant="default" data-orientation="horizontal" id="mantine-Rastbblu6"><div class="mantine-Tabs-list" data-variant="default" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-Rastbblu6-tab-chat" aria-selected="true" tabindex="0" aria-controls="mantine-Rastbblu6-panel-chat"><span class="mantine-Tabs-tabLabel">Chat</span></button><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-Rastbblu6-tab-gallery" aria-selected="false" tabindex="-1" aria-controls="mantine-Rastbblu6-panel-gallery"><span class="mantine-Tabs-tabLabel">Gallery</span></button><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-Rastbblu6-tab-account" aria-selected="false" tabindex="-1" aria-controls="mantine-Rastbblu6-panel-account"><span class="mantine-Tabs-tabLabel">Account</span></button></div><div class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-Rastbblu6-panel-chat" aria-labelledby="mantine-Rastbblu6-tab-chat">Chat panel</div><div style="display:none" class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-Rastbblu6-panel-gallery" aria-labelledby="mantine-Rastbblu6-tab-gallery">Gallery panel</div><div style="display:none" class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-Rastbblu6-panel-account" aria-labelledby="mantine-Rastbblu6-tab-account">Account panel</div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -276,4 +276,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Tabs.Panel</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;account&quot;</span>&gt;</span>Account panel<span class="hljs-tag">&lt;/<span class="hljs-name">Tabs.Panel</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Tabs</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/overview","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/overview","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index 5ee18ad2322..a725cb863d1 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -1,230 +1,231 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://mantine.dev/about</loc><lastmod>2023-09-18T13:37:42.648Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/app-shell</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/colors-generator</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/combobox</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/contribute</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/getting-started</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/overview</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/templates-usage</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/changelog/7-0-0</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/changelog/previous-versions</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/accordion</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/action-icon</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/affix</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/alert</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/anchor</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/app-shell</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/aspect-ratio</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/autocomplete</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/avatar</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/background-image</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/badge</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/blockquote</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/box</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/breadcrumbs</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/burger</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/button</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/card</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/center</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/checkbox</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/chip</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/close-button</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/code</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/collapse</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/color-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/color-picker</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/color-swatch</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/combobox</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/container</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/copy-button</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/dialog</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/divider</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/drawer</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/fieldset</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/file-button</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/file-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/flex</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/focus-trap</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/grid</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/group</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/highlight</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/hover-card</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/image</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/indicator</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/json-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/kbd</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/list</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/loader</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/loading-overlay</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/mark</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/menu</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/modal</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/multi-select</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/native-select</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/nav-link</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/notification</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/number-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/overlay</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/pagination</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/paper</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/password-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/pill</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/pills-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/pin-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/popover</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/portal</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/progress</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/radio</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/rating</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/ring-progress</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/scroll-area</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/segmented-control</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/select</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/simple-grid</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/skeleton</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/slider</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/space</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/spoiler</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/stack</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/stepper</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/switch</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/table</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/tabs</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/tags-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/text-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/text</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/textarea</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/theme-icon</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/timeline</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/title</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/tooltip</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/transition</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/typography-styles-provider</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/unstyled-button</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/core/visually-hidden</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/calendar</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/date-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/date-picker-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/date-picker</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/date-time-picker</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/dates-provider</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/getting-started</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/month-picker-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/month-picker</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/time-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/year-picker-input</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/dates/year-picker</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/6x-to-7x</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/gatsby</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/icons</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/javascript</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/jest</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/next</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/polymorphic</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/redwood</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/remix</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/storybook</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/typescript</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/guides/vite</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/carousel</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/code-highlight</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/dropzone</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/modals</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/notifications</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/nprogress</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/spotlight</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/others/tiptap</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-click-outside</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-clipboard</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-color-scheme</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-counter</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-debounced-state</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-debounced-value</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-did-update</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-disclosure</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-document-title</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-document-visibility</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-element-size</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-event-listener</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-eye-dropper</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-favicon</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-focus-return</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-focus-trap</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-focus-within</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-force-update</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-fullscreen</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-hash</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-headroom</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-hotkeys</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-hover</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-id</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-idle</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-input-state</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-intersection</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-interval</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-isomorphic-effect</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-list-state</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-local-storage</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-logger</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-media-query</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-merged-ref</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-mouse</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-move</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-network</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-os</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-page-leave</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-pagination</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-previous</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-queue</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-reduced-motion</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-resize-observer</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-scroll-into-view</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-set-state</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-shallow-effect</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-text-selection</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-timeout</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-toggle</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-uncontrolled</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-validated-state</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-viewport-size</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-window-event</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/hooks/use-window-scroll</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/create-form-context</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/errors</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/nested</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/recipes</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/status</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/use-form</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/validation</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/validators</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/form/values</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/color-functions</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/css-files-list</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/css-modules</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/css-variables-list</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/css-variables</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/data-attributes</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/global-styles</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/postcss-preset</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/rem</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/responsive</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/rtl</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/style-props</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/style</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/styles-api</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/styles-performance</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/unstyled</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/vanilla-extract</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/styles/variants-sizes</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/color-schemes</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/colors</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/default-props</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/default-theme</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/mantine-provider</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/theme-object</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://mantine.dev/theming/typography</loc><lastmod>2023-09-18T13:37:42.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev</loc><lastmod>2023-09-19T18:29:44.983Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/404</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/about</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/app-shell</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/colors-generator</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/combobox</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/contribute</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/getting-started</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/overview</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/templates-usage</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/changelog/7-0-0</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/changelog/previous-versions</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/accordion</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/action-icon</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/anchor</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/alert</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/affix</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/app-shell</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/aspect-ratio</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/autocomplete</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/avatar</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/background-image</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/badge</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/box</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/blockquote</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/breadcrumbs</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/burger</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/card</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/center</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/button</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/checkbox</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/chip</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/close-button</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/code</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/collapse</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/color-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/color-picker</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/color-swatch</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/combobox</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/container</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/copy-button</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/dialog</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/divider</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/drawer</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/fieldset</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/file-button</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/file-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/flex</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/focus-trap</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/grid</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/group</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/highlight</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/hover-card</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/indicator</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/json-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/image</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/kbd</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/list</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/loading-overlay</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/loader</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/mark</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/menu</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/modal</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/multi-select</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/native-select</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/nav-link</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/notification</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/number-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/overlay</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/pagination</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/paper</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/password-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/pill</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/pills-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/pin-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/portal</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/popover</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/progress</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/radio</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/ring-progress</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/rating</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/scroll-area</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/segmented-control</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/select</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/simple-grid</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/skeleton</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/slider</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/space</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/spoiler</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/stack</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/stepper</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/switch</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/tabs</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/tags-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/table</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/text</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/theme-icon</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/textarea</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/text-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/timeline</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/title</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/tooltip</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/transition</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/unstyled-button</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/typography-styles-provider</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/core/visually-hidden</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/calendar</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/date-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/date-picker</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/date-picker-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/date-time-picker</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/dates-provider</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/month-picker</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/getting-started</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/month-picker-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/year-picker</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/time-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/dates/year-picker-input</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/create-form-context</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/nested</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/errors</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/recipes</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/status</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/use-form</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/validators</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/validation</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/form/values</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/6x-to-7x</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/gatsby</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/icons</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/javascript</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/jest</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/next</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/polymorphic</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/remix</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/storybook</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/redwood</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/typescript</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/guides/vite</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-click-outside</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-clipboard</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-color-scheme</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-counter</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-debounced-state</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-debounced-value</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-disclosure</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-did-update</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-document-title</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-event-listener</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-element-size</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-eye-dropper</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-document-visibility</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-favicon</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-focus-return</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-focus-trap</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-focus-within</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-force-update</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-fullscreen</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-hash</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-headroom</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-hotkeys</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-hover</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-id</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-idle</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-input-state</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-intersection</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-interval</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-isomorphic-effect</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-list-state</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-local-storage</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-logger</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-media-query</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-merged-ref</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-mouse</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-move</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-network</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-os</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-page-leave</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-pagination</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-previous</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-queue</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-resize-observer</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-reduced-motion</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-scroll-into-view</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-set-state</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-shallow-effect</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-text-selection</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-timeout</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-toggle</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-uncontrolled</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-validated-state</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-viewport-size</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-window-event</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/hooks/use-window-scroll</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/carousel</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/code-highlight</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/dropzone</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/notifications</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/modals</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/nprogress</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/spotlight</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/others/tiptap</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/color-functions</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/css-files-list</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/css-modules</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/css-variables</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/css-variables-list</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/data-attributes</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/global-styles</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/postcss-preset</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/rem</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/responsive</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/rtl</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/style</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/style-props</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/styles-api</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/styles-performance</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/unstyled</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/vanilla-extract</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/styles/variants-sizes</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/color-schemes</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/colors</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/default-props</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/default-theme</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/mantine-provider</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/theme-object</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://mantine.dev/theming/typography</loc><lastmod>2023-09-19T18:29:44.984Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/styles/color-functions.html b/styles/color-functions/index.html
similarity index 64%
rename from styles/color-functions.html
rename to styles/color-functions/index.html
index 2ddd2434d7b..2943087845d 100644
--- a/styles/color-functions.html
+++ b/styles/color-functions/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/color-functions-b25b3bda5a5edf7d.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Color functions</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/color-functions-b25b3bda5a5edf7d.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Color functions</h1>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package exports several functions that can be used to manipulate colors
 or extract information before using them as CSS value.</p>
 <div id="darken-and-lighten" data-heading="darken and lighten" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#darken-and-lighten">darken and lighten</a></h2>
@@ -64,7 +64,7 @@
   <span class="hljs-attr">variable</span>: <span class="hljs-title class_">CssVariable</span> | <span class="hljs-literal">undefined</span>;
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">parseThemeColor</code> function can be used everywhere <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> object is available,
-for example in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables resolver</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-variant-resolver">variant color resolver</a>
+for example in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables resolver</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-variant-resolver">variant color resolver</a>
 or component body:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { parseThemeColor, useMantineTheme, <span class="hljs-title class_">MantineColor</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -123,4 +123,4 @@
       Box with contrast text
     <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style-props"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Style props</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rtl"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RTL (right-to-left)</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/color-functions","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style-props/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Style props</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rtl/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RTL (right-to-left)</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/color-functions","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/css-files-list.html b/styles/css-files-list/index.html
similarity index 81%
rename from styles/css-files-list.html
rename to styles/css-files-list/index.html
index 4d2134ccc40..f65ec140147 100644
--- a/styles/css-files-list.html
+++ b/styles/css-files-list/index.html
@@ -3,16 +3,16 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-files-list-26e30e6d8ad4f468.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">CSS files list</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-files-list-26e30e6d8ad4f468.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">CSS files list</h1>
 <p class="MdxTypography_paragraph__Lp7wh">This page contains a list of CSS files that you can import from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package
 as a replacement for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core/styles.css</code>.</p>
 <div id="components-dependencies" data-heading="Components dependencies" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-dependencies">Components dependencies</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Some components require additional styles to work properly. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>
-component is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button">UnstyledButton</a>. If you want to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>,
+<p class="MdxTypography_paragraph__Lp7wh">Some components require additional styles to work properly. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>
+component is based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button/">UnstyledButton</a>. If you want to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>,
 you need to import styles for <code class="m-b183c0a2 mantine-Code-root" dir="ltr">UnstyledButton</code> as well.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/UnstyledButton.css&#x27;</span>;
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/Button.css&#x27;</span>;</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select">Select</a> do not have any styles on their own – they are built
+<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/select/">Select</a> do not have any styles on their own – they are built
 on top of other components. To find out which components are used in a particular component, check
 the component source code.</p>
 <div id="global-styles" data-heading="Global styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#global-styles">Global styles</a></h2>
@@ -21,8 +21,8 @@
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/global.css&#x27;</span>;</code></pre></div></div></div></div>
 <div id="import-order" data-heading="Import order" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#import-order">Import order</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">It is important to keep correct styles import order. For example, if you want to use
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component, you need to import styles for
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button">UnstyledButton</a> first and then import styles for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component, you need to import styles for
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button/">UnstyledButton</a> first and then import styles for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// ✅ Correct order – Button styles will override UnstyledButton styles</span>
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/UnstyledButton.css&#x27;</span>;
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/Button.css&#x27;</span>;</code></pre></div></div></div></div>
@@ -30,4 +30,4 @@
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/Button.css&#x27;</span>;
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/UnstyledButton.css&#x27;</span>;</code></pre></div></div></div></div>
 <div id="files-list" data-heading="Files list" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#files-list">Files list</a></h2>
-<div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Component</th><th class="m-4e7aa4f3 mantine-Table-th">Import</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">global</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/global.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Accordion</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Accordion.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ActionIcon</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ActionIcon.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Affix</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Affix.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Alert</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Alert.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Anchor</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Anchor.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">AppShell</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/AppShell.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">AspectRatio</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/AspectRatio.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Avatar</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Avatar.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">BackgroundImage</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/BackgroundImage.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Badge</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Badge.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Blockquote</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Blockquote.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Breadcrumbs</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Breadcrumbs.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Burger</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Burger.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Button</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Button.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Card</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Card.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Center</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Center.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Checkbox</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Checkbox.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Chip</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Chip.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">CloseButton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/CloseButton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Code</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Code.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorPicker</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorPicker.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorSwatch</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorSwatch.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Combobox</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Combobox.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Container</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Container.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Dialog</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Dialog.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Divider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Divider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Drawer</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Drawer.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Fieldset</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Fieldset.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Flex</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Flex.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Grid</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Grid.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Group</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Group.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Image</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Image.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Indicator</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Indicator.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">InlineInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/InlineInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Input</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Input.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Kbd</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Kbd.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">List</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/List.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Loader</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Loader.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">LoadingOverlay</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/LoadingOverlay.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Mark</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Mark.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Menu</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Menu.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Modal</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Modal.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ModalBase</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ModalBase.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">NavLink</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/NavLink.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Notification</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Notification.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">NumberInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/NumberInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Overlay</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Overlay.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Pagination</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Pagination.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Paper</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Paper.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PasswordInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PasswordInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Pill</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Pill.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PillsInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PillsInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PinInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PinInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Popover</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Popover.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Progress</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Progress.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Radio</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Radio.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Rating</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Rating.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">RingProgress</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/RingProgress.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ScrollArea</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ScrollArea.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">SegmentedControl</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/SegmentedControl.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">SimpleGrid</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/SimpleGrid.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Skeleton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Skeleton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Slider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Slider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Spoiler</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Spoiler.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Stack</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Stack.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Stepper</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Stepper.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Switch</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Switch.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Table</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Table.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Tabs</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Tabs.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Text</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Text.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ThemeIcon</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ThemeIcon.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Timeline</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Timeline.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Title</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Title.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Tooltip</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Tooltip.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">TypographyStylesProvider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/TypographyStylesProvider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">UnstyledButton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/UnstyledButton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">VisuallyHidden</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/VisuallyHidden.css&#x27;;</code></td></tr></tbody></table></div></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-files-list","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Component</th><th class="m-4e7aa4f3 mantine-Table-th">Import</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">global</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/global.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Accordion</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Accordion.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ActionIcon</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ActionIcon.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Affix</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Affix.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Alert</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Alert.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Anchor</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Anchor.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">AppShell</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/AppShell.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">AspectRatio</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/AspectRatio.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Avatar</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Avatar.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">BackgroundImage</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/BackgroundImage.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Badge</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Badge.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Blockquote</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Blockquote.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Breadcrumbs</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Breadcrumbs.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Burger</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Burger.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Button</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Button.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Card</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Card.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Center</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Center.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Checkbox</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Checkbox.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Chip</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Chip.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">CloseButton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/CloseButton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Code</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Code.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorPicker</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorPicker.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ColorSwatch</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ColorSwatch.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Combobox</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Combobox.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Container</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Container.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Dialog</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Dialog.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Divider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Divider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Drawer</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Drawer.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Fieldset</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Fieldset.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Flex</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Flex.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Grid</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Grid.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Group</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Group.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Image</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Image.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Indicator</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Indicator.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">InlineInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/InlineInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Input</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Input.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Kbd</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Kbd.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">List</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/List.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Loader</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Loader.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">LoadingOverlay</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/LoadingOverlay.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Mark</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Mark.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Menu</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Menu.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Modal</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Modal.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ModalBase</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ModalBase.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">NavLink</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/NavLink.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Notification</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Notification.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">NumberInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/NumberInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Overlay</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Overlay.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Pagination</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Pagination.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Paper</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Paper.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PasswordInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PasswordInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Pill</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Pill.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PillsInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PillsInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">PinInput</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/PinInput.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Popover</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Popover.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Progress</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Progress.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Radio</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Radio.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Rating</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Rating.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">RingProgress</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/RingProgress.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ScrollArea</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ScrollArea.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">SegmentedControl</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/SegmentedControl.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">SimpleGrid</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/SimpleGrid.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Skeleton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Skeleton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Slider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Slider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Spoiler</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Spoiler.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Stack</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Stack.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Stepper</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Stepper.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Switch</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Switch.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Table</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Table.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Tabs</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Tabs.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Text</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Text.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">ThemeIcon</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/ThemeIcon.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Timeline</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Timeline.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Title</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Title.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">Tooltip</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/Tooltip.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">TypographyStylesProvider</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/TypographyStylesProvider.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">UnstyledButton</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/UnstyledButton.css&#x27;;</code></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">VisuallyHidden</td><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">import &#x27;@mantine/core/styles/VisuallyHidden.css&#x27;;</code></td></tr></tbody></table></div></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-files-list","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/css-modules.html b/styles/css-modules/index.html
similarity index 70%
rename from styles/css-modules.html
rename to styles/css-modules/index.html
index f5222b48566..20794296f83 100644
--- a/styles/css-modules.html
+++ b/styles/css-modules/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-modules-71ab5ac464180f3e.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">CSS modules</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-modules-71ab5ac464180f3e.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">CSS modules</h1>
 <p class="MdxTypography_paragraph__Lp7wh">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.</p>
@@ -51,15 +51,15 @@
 <p class="MdxTypography_paragraph__Lp7wh">By adding this import, you will have all styles of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> components in your application.</p>
 <div id="import-styles-per-component" data-heading="Import styles per component" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#import-styles-per-component">Import styles per component</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to reduce CSS bundle size, you can import styles per component. Note that some components
-have dependencies, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button">UnstyledButton</a>
+have dependencies, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/unstyled-button/">UnstyledButton</a>
 component internally, so you need to import styles for both components. You can find a full list of
-exported styles from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package and additional instructions on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-files-list">this page</a>.</p>
+exported styles from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package and additional instructions on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-files-list/">this page</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/UnstyledButton.css&#x27;</span>;
 <span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mantine/core/styles/Button.css&#x27;</span>;</code></pre></div></div></div></div>
 <div id="adding-styles-to-mantine-components" data-heading="Adding styles to Mantine components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#adding-styles-to-mantine-components">Adding styles to Mantine components</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can add styles to most of Mantine components using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> prop
 – the same way as you would do with a regular HTML element.
-To set properties to your <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> values, you can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">Mantine CSS variables</a>:</p>
+To set properties to your <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> values, you can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">Mantine CSS variables</a>:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-3b7b8cc2">Box component with <span class="m-b0c0466b">some styles</span></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -71,7 +71,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">To apply styles to inner elements of Mantine components with CSS modules, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> prop
-(see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> for more information):</p>
+(see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> for more information):</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(22.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-bf550b40 m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-2af14056 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-Ram5bblu6" id="mantine-Ram5bblu6-label">Floating label input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-2acd192c m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" aria-invalid="false" id="mantine-Ram5bblu6" value=""/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -158,7 +158,7 @@
 Before choosing another styling solution, make sure that CSS modules do not fit your needs.
 Other solutions have limitations, for example:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">It is hard to customize styles based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes">data-* attributes</a> when using utility-based CSS libraries</li>
-<li class="MdxTypography_li__JpNrx">It is impossible to style inner elements of Mantine components with static selectors when using styled-components and other similar libraries if component uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal">Portal</a> because some elements will be rendered outside of the component root and inner elements are not part of the component tree</li>
+<li class="MdxTypography_li__JpNrx">It is hard to customize styles based on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/data-attributes/">data-* attributes</a> when using utility-based CSS libraries</li>
+<li class="MdxTypography_li__JpNrx">It is impossible to style inner elements of Mantine components with static selectors when using styled-components and other similar libraries if component uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/portal/">Portal</a> because some elements will be rendered outside of the component root and inner elements are not part of the component tree</li>
 </ul>
-</blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/default-props"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Default props</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/postcss-preset"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PostCSS preset</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-modules","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/default-props/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Default props</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/postcss-preset/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PostCSS preset</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-modules","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/css-variables-list.html b/styles/css-variables-list/index.html
similarity index 91%
rename from styles/css-variables-list.html
rename to styles/css-variables-list/index.html
index b46857b365e..36dcbe0ec64 100644
--- a/styles/css-variables-list.html
+++ b/styles/css-variables-list/index.html
@@ -3,6 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-variables-list-872e863777de53b7.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default CSS variables list</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-variables-list-872e863777de53b7.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default CSS variables list</h1>
 <p class="MdxTypography_paragraph__Lp7wh">This page contains a list of all Mantine CSS variables that are generated from default theme.</p>
-<div id="no-dependency" data-heading="CSS variables not depending on color scheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#no-dependency">CSS variables not depending on color scheme</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-scale</code></td><td class="m-4e7aa4ef mantine-Table-td">1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-cursor-type</code></td><td class="m-4e7aa4ef mantine-Table-td">default</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-webkit-font-smoothing</code></td><td class="m-4e7aa4ef mantine-Table-td">antialiased</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-scheme</code></td><td class="m-4e7aa4ef mantine-Table-td">light dark</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-moz-font-smoothing</code></td><td class="m-4e7aa4ef mantine-Table-td">grayscale</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-white</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-black</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.55</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family</code></td><td class="m-4e7aa4ef mantine-Table-td">-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family-monospace</code></td><td class="m-4e7aa4ef mantine-Table-td">ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family-headings</code></td><td class="m-4e7aa4ef mantine-Table-td">-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-heading-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-default</code></td><td class="m-4e7aa4ef mantine-Table-td">0.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-filled)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-filled-hover)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light-hover)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light-color)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">36em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">48em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-md</code></td><td class="m-4e7aa4ef mantine-Table-td">62em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">75em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">88em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.625rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">2rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.875rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">1.4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">1.45</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1.55</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">1.65</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-xs</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-sm</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-md</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-lg</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-xl</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-md</code></td><td class="m-4e7aa4ef mantine-Table-td">0.5rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">2rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#C1C2C5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#A6A7AB</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#909296</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#2C2E33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#141517</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#101113</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#f1f3f5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#e9ecef</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#dee2e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#adb5bd</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#495057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#343a40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#212529</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff5f5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe3e3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc9c9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff8787</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff6b6b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f03e3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#e03131</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff0f6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffdeeb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#fcc2d7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#faa2c1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#f783ac</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#f06595</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#d6336c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#c2255c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#a61e4d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#f3d9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#eebefa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#e599f7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#da77f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#cc5de8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#ae3ec9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#9c36b5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#862e9c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f3f0ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#e5dbff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#d0bfff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#b197fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#9775fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#845ef7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#7048e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#6741d9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#5f3dc4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#edf2ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#dbe4ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#bac8ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#91a7ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#748ffc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c7cfa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#4263eb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#3b5bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#364fc7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e7f5ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#d0ebff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#a5d8ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#74c0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#339af0</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1c7ed6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#1971c2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#1864ab</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e3fafc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#c5f6fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#99e9f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#66d9e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#3bc9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#22b8cf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1098ad</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#0c8599</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#0b7285</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e6fcf5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#c3fae8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#96f2d7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#63e6be</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#38d9a9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#20c997</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#0ca678</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#099268</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#087f5b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#ebfbee</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#d3f9d8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#b2f2bb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#8ce99a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#69db7c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#51cf66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#37b24d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#2f9e44</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#2b8a3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f4fce3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#e9fac8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#d8f5a2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#c0eb75</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#a9e34b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#94d82d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#74b816</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#66a80f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c940d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff3bf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffec99</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe066</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd43b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#fcc419</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f59f00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#f08c00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#e67700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff4e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe8cc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc078</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa94d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff922b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f76707</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#e8590c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#d9480f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">2.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.625rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.35</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.375rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.45</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">0.875rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr></tbody></table></div></div></div><div id="light-only" data-heading="Light color scheme only variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#light-only">Light color scheme only variables</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-bright</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-black)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-text</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-body</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code></td><td class="m-4e7aa4ef mantine-Table-td">#adb5bd</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-border</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dimmed</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-gray-6)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#495057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f03e3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#d6336c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#ae3ec9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#7048e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#4263eb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1c7ed6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1098ad</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#0ca678</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#37b24d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#74b816</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f59f00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f76707</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.05)</td></tr></tbody></table></div></div></div><div id="dark-only" data-heading="Dark color scheme only variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#dark-only">Dark color scheme only variables</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-bright</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-white)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-text</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-dark-0)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-body</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#2C2E33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-border</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dimmed</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-dark-2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#141517</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#101113</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(55, 58, 64, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#343a40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#212529</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#dee2e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(206, 212, 218, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e03131</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff8787</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 135, 135, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#c2255c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#a61e4d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#faa2c1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#f783ac</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(247, 131, 172, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#9c36b5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#862e9c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#e599f7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#da77f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(218, 119, 242, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#6741d9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#5f3dc4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#b197fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#9775fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(151, 117, 250, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#3b5bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#364fc7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#91a7ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#748ffc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(116, 143, 252, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#1971c2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1864ab</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#74c0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(77, 171, 247, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#0c8599</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#0b7285</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#66d9e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#3bc9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(59, 201, 219, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#099268</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#087f5b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#63e6be</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#38d9a9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(56, 217, 169, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#2f9e44</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#2b8a3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#8ce99a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#69db7c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(105, 219, 124, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#66a80f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c940d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#c0eb75</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#a9e34b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(169, 227, 75, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#f08c00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#e67700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe066</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd43b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 212, 59, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e8590c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#d9480f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc078</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa94d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 169, 77, 0.05)</td></tr></tbody></table></div></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-variables-list","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div id="no-dependency" data-heading="CSS variables not depending on color scheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#no-dependency">CSS variables not depending on color scheme</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-scale</code></td><td class="m-4e7aa4ef mantine-Table-td">1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-cursor-type</code></td><td class="m-4e7aa4ef mantine-Table-td">default</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-webkit-font-smoothing</code></td><td class="m-4e7aa4ef mantine-Table-td">antialiased</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-scheme</code></td><td class="m-4e7aa4ef mantine-Table-td">light dark</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-moz-font-smoothing</code></td><td class="m-4e7aa4ef mantine-Table-td">grayscale</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-white</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-black</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.55</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family</code></td><td class="m-4e7aa4ef mantine-Table-td">-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family-monospace</code></td><td class="m-4e7aa4ef mantine-Table-td">ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-family-headings</code></td><td class="m-4e7aa4ef mantine-Table-td">-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-heading-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-default</code></td><td class="m-4e7aa4ef mantine-Table-td">0.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-filled)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-filled-hover)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light-hover)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-primary-color-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-blue-light-color)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">36em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">48em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-md</code></td><td class="m-4e7aa4ef mantine-Table-td">62em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">75em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-breakpoint-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">88em</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.625rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">2rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.875rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-font-size-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">1.4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">1.45</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1.55</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-line-height-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">1.65</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-xs</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-sm</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-md</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-lg</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-shadow-xl</code></td><td class="m-4e7aa4ef mantine-Table-td"></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-md</code></td><td class="m-4e7aa4ef mantine-Table-td">0.5rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-radius-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">2rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#C1C2C5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#A6A7AB</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#909296</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#2C2E33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#141517</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#101113</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#f1f3f5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#e9ecef</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#dee2e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#adb5bd</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#495057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#343a40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#212529</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff5f5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe3e3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc9c9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff8787</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff6b6b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f03e3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#e03131</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff0f6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffdeeb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#fcc2d7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#faa2c1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#f783ac</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#f06595</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#d6336c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#c2255c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#a61e4d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#f3d9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#eebefa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#e599f7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#da77f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#cc5de8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#ae3ec9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#9c36b5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#862e9c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f3f0ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#e5dbff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#d0bfff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#b197fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#9775fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#845ef7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#7048e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#6741d9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#5f3dc4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#edf2ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#dbe4ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#bac8ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#91a7ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#748ffc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c7cfa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#4263eb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#3b5bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#364fc7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e7f5ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#d0ebff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#a5d8ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#74c0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#339af0</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1c7ed6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#1971c2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#1864ab</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e3fafc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#c5f6fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#99e9f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#66d9e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#3bc9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#22b8cf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#1098ad</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#0c8599</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#0b7285</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#e6fcf5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#c3fae8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#96f2d7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#63e6be</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#38d9a9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#20c997</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#0ca678</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#099268</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#087f5b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#ebfbee</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#d3f9d8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#b2f2bb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#8ce99a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#69db7c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#51cf66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#37b24d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#2f9e44</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#2b8a3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#f4fce3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#e9fac8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#d8f5a2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#c0eb75</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#a9e34b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#94d82d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#74b816</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#66a80f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c940d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff3bf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffec99</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe066</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd43b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#fcc419</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f59f00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#f08c00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#e67700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-0</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff4e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-1</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe8cc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-2</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-3</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc078</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-4</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa94d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-5</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff922b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-6</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-7</code></td><td class="m-4e7aa4ef mantine-Table-td">#f76707</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-8</code></td><td class="m-4e7aa4ef mantine-Table-td">#e8590c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-9</code></td><td class="m-4e7aa4ef mantine-Table-td">#d9480f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">2.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.3</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h1-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.625rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.35</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h2-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.375rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h3-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1.125rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.45</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h4-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h5-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-font-size</code></td><td class="m-4e7aa4ef mantine-Table-td">0.875rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-line-height</code></td><td class="m-4e7aa4ef mantine-Table-td">1.5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-h6-font-weight</code></td><td class="m-4e7aa4ef mantine-Table-td">700</td></tr></tbody></table></div></div></div><div id="light-only" data-heading="Light color scheme only variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#light-only">Light color scheme only variables</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-bright</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-black)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-text</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-body</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code></td><td class="m-4e7aa4ef mantine-Table-td">#adb5bd</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f8f9fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#000</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-border</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dimmed</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-gray-6)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#495057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#868e96</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f03e3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fa5252</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#d6336c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#e64980</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#ae3ec9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#be4bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#7048e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#7950f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#4263eb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#4c6ef5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1c7ed6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#228be6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1098ad</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#15aabf</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#0ca678</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#12b886</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#37b24d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#40c057</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#74b816</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#82c91e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f59f00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fab005</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#f76707</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.1)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.12)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#fd7e14</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.05)</td></tr></tbody></table></div></div></div><div id="dark-only" data-heading="Dark color scheme only variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#dark-only">Dark color scheme only variables</a></h2><div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-bright</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-white)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-text</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-dark-0)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-body</code></td><td class="m-4e7aa4ef mantine-Table-td">#1A1B1E</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default</code></td><td class="m-4e7aa4ef mantine-Table-td">#25262b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#2C2E33</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#fff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-border</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dimmed</code></td><td class="m-4e7aa4ef mantine-Table-td">var(--mantine-color-dark-2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#141517</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#101113</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(37, 38, 43, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c5f66</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#373A40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-dark-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(55, 58, 64, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#343a40</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#212529</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(134, 142, 150, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#dee2e6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ced4da</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-gray-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(206, 212, 218, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e03131</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#c92a2a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 82, 82, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa8a8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ff8787</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 135, 135, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#c2255c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#a61e4d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(230, 73, 128, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#faa2c1</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#f783ac</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-pink-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(247, 131, 172, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#9c36b5</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#862e9c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(190, 75, 219, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#e599f7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#da77f2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-grape-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(218, 119, 242, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#6741d9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#5f3dc4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(121, 80, 242, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#b197fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#9775fa</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-violet-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(151, 117, 250, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#3b5bdb</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#364fc7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(76, 110, 245, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#91a7ff</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#748ffc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-indigo-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(116, 143, 252, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#1971c2</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#1864ab</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(34, 139, 230, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#74c0fc</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#4dabf7</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-blue-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(77, 171, 247, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#0c8599</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#0b7285</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(21, 170, 191, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#66d9e8</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#3bc9db</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-cyan-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(59, 201, 219, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#099268</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#087f5b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(18, 184, 134, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#63e6be</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#38d9a9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-teal-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(56, 217, 169, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#2f9e44</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#2b8a3e</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(64, 192, 87, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#8ce99a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#69db7c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-green-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(105, 219, 124, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#66a80f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#5c940d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(130, 201, 30, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#c0eb75</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#a9e34b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-lime-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(169, 227, 75, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#f08c00</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#e67700</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(250, 176, 5, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffe066</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffd43b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-yellow-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 212, 59, 0.05)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled</code></td><td class="m-4e7aa4ef mantine-Table-td">#e8590c</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-filled-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">#d9480f</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.15)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(253, 126, 20, 0.2)</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-light-color</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffc078</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline</code></td><td class="m-4e7aa4ef mantine-Table-td">#ffa94d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-orange-outline-hover</code></td><td class="m-4e7aa4ef mantine-Table-td">rgba(255, 169, 77, 0.05)</td></tr></tbody></table></div></div></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-variables-list","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/css-variables.html b/styles/css-variables/index.html
similarity index 70%
rename from styles/css-variables.html
rename to styles/css-variables/index.html
index 82b834fda8e..5aaf565cd52 100644
--- a/styles/css-variables.html
+++ b/styles/css-variables/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-variables-a901387ac3cc0aa4.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine CSS variables</h1>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> exposes all Mantine CSS variables based on the given <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>.
-You can use these variables in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS</a> files, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style">style prop</a> or any other styles.
-Note that not all values are documented on this page, you can find full list of variables on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables-list">this page</a>.</p>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/css-variables-a901387ac3cc0aa4.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine CSS variables</h1>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> exposes all Mantine CSS variables based on the given <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>.
+You can use these variables in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS</a> files, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style/">style prop</a> or any other styles.
+Note that not all values are documented on this page, you can find full list of variables on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables-list/">this page</a>.</p>
 <div id="typography-css-variables" data-heading="Typography CSS variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#typography-css-variables">Typography CSS variables</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">The following CSS variables are used to control all typography styles (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-family</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">font-size</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">line-height</code>)
 in all Mantine components:</p>
@@ -19,7 +19,7 @@
 }</code></pre></div></div></div></div>
 <div id="spacing" data-heading="Spacing" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#spacing">Spacing</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Spacing CSS variables are used to control margins and paddings in most of Mantine components.
-They are also used in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">m</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>:</p>
+They are also used in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">p</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">m</code> <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>:</p>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Variable</th><th class="m-4e7aa4f3 mantine-Table-th">Default value</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xs</code></td><td class="m-4e7aa4ef mantine-Table-td">0.625rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-sm</code></td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-md</code></td><td class="m-4e7aa4ef mantine-Table-td">1rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-lg</code></td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><code style="white-space:nowrap" class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-spacing-xl</code></td><td class="m-4e7aa4ef mantine-Table-td">2rem</td></tr></tbody></table></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Usage:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
@@ -48,7 +48,7 @@
 <div id="colors" data-heading="Colors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors">Colors</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">All <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors</code> values are exposed as CSS variables in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-{x}-{y}</code> format,
 where <code class="m-b183c0a2 mantine-Code-root" dir="ltr">x</code> is the color name and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">y</code> is the color shade. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-red-6</code> is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors.red[6]</code>.
-You can find the full default colors list in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#default-colors">colors guide</a>.</p>
+You can find the full default colors list in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#default-colors">colors guide</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Usage:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mantine-color-red-<span class="hljs-number">6</span>);
@@ -81,9 +81,9 @@
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-black</code> – value of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.black</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-text</code> – text color set on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">body</code> element</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-body</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">body</code> element background-color</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code> – error color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> and other similar components</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code> – placeholder color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> and other similar components to set text color of placeholder</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code> – anchor color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/anchor">Anchor</a> component</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-error</code> – error color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> and other similar components</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-placeholder</code> – placeholder color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> and other similar components to set text color of placeholder</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-anchor</code> – anchor color, used in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/anchor/">Anchor</a> component</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default</code> – default variant background-color</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-hover</code> – default variant background-color on hover</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">--mantine-color-default-color</code> – default variant text color</li>
@@ -102,9 +102,9 @@
   }
 }</code></pre></div></div></div></div>
 <div id="css-variables-resolver" data-heading="CSS variables resolver" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#css-variables-resolver">CSS variables resolver</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> prop on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> allows you to
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> prop on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> allows you to
 modify values of Mantine CSS variables or even add your own variables.
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> is a function that accepts <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> as a single
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> is a function that accepts <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> as a single
 argument and returns an object with CSS variables divided into three groups:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">variables</code> – variables that do not depend on color scheme</li>
@@ -148,4 +148,4 @@
 
   <span class="hljs-comment">/* background color will automatically change based on color scheme */</span>
   <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-deep-orange);
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/global-styles"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Global styles</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rem"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">rem, em and px units</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-variables","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/global-styles/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Global styles</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rem/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">rem, em and px units</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/css-variables","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/data-attributes.html b/styles/data-attributes/index.html
similarity index 70%
rename from styles/data-attributes.html
rename to styles/data-attributes/index.html
index c83ba870545..937bf45c374 100644
--- a/styles/data-attributes.html
+++ b/styles/data-attributes/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/data-attributes-25cf7c4084961dfc.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">data attributes</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/data-attributes-25cf7c4084961dfc.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">data attributes</h1>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine components use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> 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 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes as modifiers.</p>
@@ -54,7 +54,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="data-attributes-values" data-heading="data attributes values" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#data-attributes-values">data attributes values</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes do not have associated values, they represent boolean
-state or feature. For example, when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code> prop on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> is set
+state or feature. For example, when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code> prop on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> is set
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> attribute is added to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;button /&gt;</code> element:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -78,7 +78,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">disabled</code> prop is not set, then <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-disabled</code> attribute is not added to the
 button:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-button&quot;</span>&gt;</span>Not disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">In some cases, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes have associated values, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>
+<p class="MdxTypography_paragraph__Lp7wh">In some cases, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes have associated values, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>
 component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">section</code> element has an associated <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-position</code> attribute which can be
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">left</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">right</code>. The following example will render two <code class="m-b183c0a2 mantine-Code-root" dir="ltr">section</code> elements, one with
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-position=&quot;left&quot;</code> and another with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-position=&quot;right&quot;</code>:</p>
@@ -114,17 +114,17 @@
 }</code></pre></div></div></div></div>
 <div id="components-data-attributes-documentation" data-heading="Components data attributes documentation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-data-attributes-documentation">Components data attributes documentation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Every component that uses <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes has a dedicated section under <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Styles API</code> tab.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes table:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-*</code> attributes table:</p>
 <div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale));margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-xl)" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Selector</th><th class="m-4e7aa4f3 mantine-Table-th">Attribute</th><th class="m-4e7aa4f3 mantine-Table-th">Condition</th><th class="m-4e7aa4f3 mantine-Table-th">Value</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-disabled</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true"><code>disabled</code> prop is set</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root, label</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-loading</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true"><code>loading</code> prop is set</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-block</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true"><code>fullWidth</code> prop is set</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-with-left-section</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true"><code>leftSection</code> is set</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-with-right-section</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true"><code>rightSection</code> is set</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">section</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">data-position</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">–</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Section position: left or right</span></td></tr></tbody></table></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">How to read the table:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">selector</code> column – <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> selector (or multiple selectors) to which data attribute is added</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">selector</code> column – <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> selector (or multiple selectors) to which data attribute is added</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">attribute</code> column – data attribute name</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">condition</code> column – condition based on which data attribute is added to the element</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">value</code> column – value of the data attribute</li>
 </ul>
 <div id="box-component-mod-prop" data-heading="Box component mod prop" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#box-component-mod-prop">Box component mod prop</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/box">Box</a> component supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mod</code> prop, which allows adding data attributes to
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/box/">Box</a> component supports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">mod</code> prop, which allows adding data attributes to
 the element. You can use to create custom components with data attributes.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -141,4 +141,4 @@
 <span class="hljs-comment">// -&gt; &lt;div data-button data-opened /&gt;</span>
 
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">mod</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">orientation:</span> &#x27;<span class="hljs-attr">horizontal</span>&#x27; }} /&gt;</span></span>;
-<span class="hljs-comment">// -&gt; &lt;div data-orientation=&quot;horizontal&quot; /&gt;</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-api"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles API</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/variants-sizes"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Variants and sizes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/data-attributes","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-comment">// -&gt; &lt;div data-orientation=&quot;horizontal&quot; /&gt;</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-api/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles API</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/variants-sizes/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Variants and sizes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/data-attributes","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/global-styles.html b/styles/global-styles/index.html
similarity index 64%
rename from styles/global-styles.html
rename to styles/global-styles/index.html
index d43d591f526..9c32cc2488c 100644
--- a/styles/global-styles.html
+++ b/styles/global-styles/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/global-styles-95fe47c111c99603.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Global styles</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/global-styles-95fe47c111c99603.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Global styles</h1>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> 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.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Global styles are automatically imported with:</p>
@@ -84,12 +84,12 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="add-global-styles-in-your-application" data-heading="Add global styles in your application" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#add-global-styles-in-your-application">Add global styles in your application</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">It is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> to apply styles to Mantine components
-with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> prop or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>. CSS modules files names usually
+<p class="MdxTypography_paragraph__Lp7wh">It is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> to apply styles to Mantine components
+with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> prop or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>. CSS modules files names usually
 end with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.module.css</code>, if you want to add global styles to your application, create a file with
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> extension but without <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.module</code> part, for example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">global.css</code>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">In global <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files you can reference all Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> and
+<p class="MdxTypography_paragraph__Lp7wh">In global <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files you can reference all Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> and
 change styles of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;body /&gt;</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code> and other elements. For example, to change body background-color:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-tag">body</span> {
   <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-red-filled);
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/vanilla-extract"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Vanilla extract</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-variables"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS variables</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/global-styles","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/vanilla-extract/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Vanilla extract</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-variables/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS variables</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/global-styles","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/postcss-preset.html b/styles/postcss-preset/index.html
similarity index 69%
rename from styles/postcss-preset.html
rename to styles/postcss-preset/index.html
index 092435d96a5..ef8997597fc 100644
--- a/styles/postcss-preset.html
+++ b/styles/postcss-preset/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/postcss-preset-e3502a0aafaba69b.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine PostCSS preset</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/postcss-preset-e3502a0aafaba69b.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Mantine PostCSS preset</h1>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-preset-mantine</code> 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.</p>
@@ -18,7 +18,7 @@
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss-preset-mantine</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Note that setting up PostCSS may be different depending on your build tool/framework, check
-a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started">dedicated framework guide</a> to learn more.
+a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started/">dedicated framework guide</a> to learn more.
 Add <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-preset-mantine</code> to your <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code> file (usually it is located in the root of your project):</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
   <span class="hljs-attr">plugins</span>: {
@@ -29,7 +29,7 @@
 <div id="remem-functions" data-heading="rem/em functions" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#remem-functions">rem/em functions</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> functions can be used to convert pixels to rem/em units.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">16px = 1rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">16px = 1em</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> values are supposed to be used in media queries,
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> everywhere else. You can learn more about units conversions in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">this guide</a>.</p>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> everywhere else. You can learn more about units conversions in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">this guide</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">16px</span>);
 
@@ -126,4 +126,4 @@
 <span class="hljs-selector-attr">[dir=<span class="hljs-string">&#x27;rtl&#x27;</span>]</span> <span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">1rem</span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-modules"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS modules</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/vanilla-extract"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Vanilla extract</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/postcss-preset","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-modules/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS modules</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/vanilla-extract/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Vanilla extract</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/postcss-preset","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/rem.html b/styles/rem/index.html
similarity index 67%
rename from styles/rem.html
rename to styles/rem/index.html
index dacf1341ff0..92a9204dc00 100644
--- a/styles/rem.html
+++ b/styles/rem/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/rem-c5e0739c34aa0a91.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">rem, em and px units</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/rem-c5e0739c34aa0a91.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">rem, em and px units</h1>
 <div id="rem-units" data-heading="rem units" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#rem-units">rem units</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">All Mantine components use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> units to apply size styles (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">margin</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">padding</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">width</code>, etc.).
 By default, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1rem</code> is considered to be <code class="m-b183c0a2 mantine-Code-root" dir="ltr">16px</code> as it is a default setting in most browsers.
@@ -24,7 +24,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="rem-units-scaling" data-heading="rem units scaling" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#rem-units-scaling">rem units scaling</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">If you want to change font-size of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">html</code> element and preserve Mantine components sizes,
-set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scale</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> to the value of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / htmlFontSize</code>.</p>
+set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scale</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> to the value of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / htmlFontSize</code>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">For example, if you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">html</code> font-size to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">10px</code> and want to scale Mantine components accordingly, you need
 to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">scale</code> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / (10 / 16)</code> (16 – default font-size) = <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1 / 0.625</code> = <code class="m-b183c0a2 mantine-Code-root" dir="ltr">1.6</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-pseudo">:root</span> {
@@ -60,7 +60,7 @@
   <span class="hljs-comment">// This demo will have the same size as previous one</span>
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ColorSwatch</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#000&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;2rem&quot;</span> /&gt;</span></span>;
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">The same conversion happens in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">The same conversion happens in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -93,12 +93,12 @@
 <span class="hljs-title function_">px</span>(<span class="hljs-string">&#x27;2rem&#x27;</span>); <span class="hljs-comment">// -&gt; 32</span>
 <span class="hljs-title function_">px</span>(<span class="hljs-string">&#x27;10rem&#x27;</span>); <span class="hljs-comment">// -&gt; 160</span></code></pre></div></div></div></div>
 <div id="remem-functions-in-css-files" data-heading="rem/em functions in css files" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#remem-functions-in-css-files">rem/em functions in css files</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> function in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">css files</a> if
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> is installed:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> function in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">css files</a> if
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> is installed:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">16px</span>);
 
   <span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: em(<span class="hljs-number">320px</span>)) {
     <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">32px</span>);
   }
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-variables"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS variables</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">style prop</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/rem","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-variables/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS variables</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">style prop</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/rem","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/responsive.html b/styles/responsive/index.html
similarity index 74%
rename from styles/responsive.html
rename to styles/responsive/index.html
index b45157ca184..a0fae0f3869 100644
--- a/styles/responsive.html
+++ b/styles/responsive/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/responsive-750ebbfd489bd1ce.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Responsive styles</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/responsive-750ebbfd489bd1ce.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Responsive styles</h1>
 <div id="media-queries" data-heading="Media queries" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#media-queries">Media queries</a></h2>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-f2874dbd">Demo</div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-blue-filled);
@@ -17,7 +17,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="configure-breakpoints" data-heading="Configure breakpoints" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#configure-breakpoints">Configure breakpoints</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.breakpoints</code> are used in all responsive Mantine components. Breakpoints are expected to be set in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> units.
-You can configure these values with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>:</p>
+You can configure these values with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -41,10 +41,10 @@
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Breakpoint</th><th class="m-4e7aa4f3 mantine-Table-th">Viewport width</th><th class="m-4e7aa4f3 mantine-Table-th">Value in px</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xs</td><td class="m-4e7aa4ef mantine-Table-td">36em</td><td class="m-4e7aa4ef mantine-Table-td">576px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">sm</td><td class="m-4e7aa4ef mantine-Table-td">48em</td><td class="m-4e7aa4ef mantine-Table-td">768px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">md</td><td class="m-4e7aa4ef mantine-Table-td">62em</td><td class="m-4e7aa4ef mantine-Table-td">992px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">lg</td><td class="m-4e7aa4ef mantine-Table-td">75em</td><td class="m-4e7aa4ef mantine-Table-td">1200px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xl</td><td class="m-4e7aa4ef mantine-Table-td">88em</td><td class="m-4e7aa4ef mantine-Table-td">1408px</td></tr></tbody></table></div></div></div>
 <div id="breakpoints-variables-in-css-modules" data-heading="Breakpoints variables in CSS modules" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#breakpoints-variables-in-css-modules">Breakpoints variables in CSS modules</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">It is not possible to use CSS variables inside media queries – these values cannot be dynamically
-generated by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>. To use Mantine theme breakpoints
+generated by <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>. To use Mantine theme breakpoints
 in your <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files, you will need <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-simple-vars</code> package:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add --dev postcss-simple-vars</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
-<p class="MdxTypography_paragraph__Lp7wh">Add it to your <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">PostCSS config</a> in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Add it to your <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">PostCSS config</a> in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss.config.js</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
   <span class="hljs-attr">plugins</span>: {
     <span class="hljs-string">&#x27;postcss-preset-mantine&#x27;</span>: {},
@@ -74,7 +74,7 @@
 <blockquote style="--bq-bg-light:rgba(34, 139, 230, 0.07);--bq-bg-dark:rgba(25, 113, 194, 0.06);--bq-bd:var(--mantine-color-blue-filled);--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="MdxInfo_icon__uA1Pv"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span>
 <p class="MdxTypography_paragraph__Lp7wh"><strong>Dynamic breakpoints are not supported</strong></p>
 <p class="MdxTypography_paragraph__Lp7wh">Values that are defined in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">postcss-simple-vars</code> config are static and
-are not connected to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> – if values change,
+are not connected to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> – if values change,
 you will need to update them manually in both theme override and postcss config.</p>
 </blockquote>
 <div id="hiddenfrom-and-visiblefrom-props" data-heading="hiddenFrom and visibleFrom props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#hiddenfrom-and-visiblefrom-props">hiddenFrom and visibleFrom props</a></h2>
@@ -125,15 +125,15 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="use-media-query-hook" data-heading="use-media-query hook" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#use-media-query-hook">use-media-query hook</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query">use-media-query hook</a> to change some of component props
+<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query/">use-media-query hook</a> to change some of component props
 based on media query. Note that this approach is not recommended for most of the cases if you have
 ssr in your application (you use Next.js, Remix, Gatsby or any other framework that includes ssr)
 as it may cause hydration mismatch. If you do not have ssr in your application (for example, if you use Vite),
 then you can safely use this hook to change props of components or conditionally render components
 based on hook return value.</p>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query">use-media-query hook</a> can be safely used to change props of components that are not rendered
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/hooks/use-media-query/">use-media-query hook</a> can be safely used to change props of components that are not rendered
 on server side (modals, tooltips, etc.). In the following example, it is safe to use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">useMediaQuery</code> hook to
-change <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip">Tooltip</a> props as it is not rendered on server side:</p>
+change <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tooltip/">Tooltip</a> props as it is not rendered on server side:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Hover me</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tooltip</span>, <span class="hljs-title class_">Button</span>, em } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { useMediaQuery } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/hooks&#x27;</span>;
 
@@ -145,4 +145,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>&gt;</span>Hover me<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">Tooltip</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">style prop</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-api"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles API</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/responsive","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">style prop</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-api/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles API</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/responsive","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/rtl.html b/styles/rtl/index.html
similarity index 65%
rename from styles/rtl.html
rename to styles/rtl/index.html
index f3daf818d65..09eeae12b36 100644
--- a/styles/rtl.html
+++ b/styles/rtl/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/rtl-d40ddfbe0d505869.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Right-to-left direction</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/rtl-d40ddfbe0d505869.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Right-to-left direction</h1>
 <p class="MdxTypography_paragraph__Lp7wh">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 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Ctrl + Shift + L</code>.</p>
@@ -69,7 +69,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="rtl-mixin" data-heading="rtl mixin" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#rtl-mixin">rtl mixin</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">If you have <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> installed then you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rtl</code> mixin in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files:</p>
+<p class="MdxTypography_paragraph__Lp7wh">If you have <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> installed then you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rtl</code> mixin in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> files:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-7bd29d5a">Demo</div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.demo</span> {
   <span class="hljs-attribute">text-align</span>: center;
   <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mantine-color-white);
@@ -82,4 +82,4 @@
     <span class="hljs-comment">/* RTL styles override LTR styles */</span>
     <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mantine-color-red-filled);
   }
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/color-functions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color functions</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-performance"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles performance</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/rtl","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/color-functions/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color functions</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/styles-performance/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Styles performance</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/rtl","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/style-props.html b/styles/style-props/index.html
similarity index 72%
rename from styles/style-props.html
rename to styles/style-props/index.html
index 5cb2a3928e6..ad01ae4457d 100644
--- a/styles/style-props.html
+++ b/styles/style-props/index.html
@@ -3,10 +3,10 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/style-props-1fb959cd43247984.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Style props</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/style-props-1fb959cd43247984.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Style props</h1>
 <p class="MdxTypography_paragraph__Lp7wh">With style props, you can add inline styles to any Mantine component.
 Style props add styles to the <strong>root</strong> element, if you need to style nested elements,
-use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> instead.</p>
+use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> instead.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -57,7 +57,7 @@
 <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">bg</span>=<span class="hljs-string">&quot;rgba(0, 34, 45, 0.6)&quot;</span> /&gt;</span></span></code></pre></div></div></div></div>
 <div id="responsive-styles" data-heading="Responsive styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-styles">Responsive styles</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can use object syntax to add responsive styles with style props.
-Note that responsive style props are <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-performance">less performant</a> than regular style props,
+Note that responsive style props are <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-performance/">less performant</a> than regular style props,
 it is not recommended to use them in large lists of elements.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><style data-mantine-styles="inline">.__m__-R5bdbblu6{padding-top:var(--mantine-spacing-xs);padding-bottom:var(--mantine-spacing-xs);background:var(--mantine-color-blue-7);width:calc(12.5rem * var(--mantine-scale));}@media(min-width: 48em){.__m__-R5bdbblu6{padding-top:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-md);background:var(--mantine-color-red-7);width:calc(25rem * var(--mantine-scale));}}@media(min-width: 75em){.__m__-R5bdbblu6{padding-top:var(--mantine-spacing-xl);padding-bottom:var(--mantine-spacing-xl);background:var(--mantine-color-green-7);width:calc(31.25rem * var(--mantine-scale));}}</style><div style="margin-right:auto;margin-left:auto;color:#fff;text-align:center" class="__m__-R5bdbblu6">Box with responsive style props</div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -77,7 +77,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Responsive values are calculated the following way:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">base</code> value is used when none of breakpoint values are applied</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sm</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xl</code> values are used when the viewport width is larger that the value of corresponding breakpoint specified in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive">theme.breakpoints</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">xs</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">sm</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">md</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">lg</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">xl</code> values are used when the viewport width is larger that the value of corresponding breakpoint specified in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/responsive/">theme.breakpoints</a></li>
 </ul>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -100,4 +100,4 @@
   <span class="hljs-selector-class">.element</span> {
     <span class="hljs-attribute">width</span>: <span class="hljs-number">40rem</span>;
   }
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/unstyled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Unstyled / headless</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/color-functions"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color functions</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/style-props","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/unstyled/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Unstyled / headless</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/color-functions/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color functions</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/style-props","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/style.html b/styles/style/index.html
similarity index 58%
rename from styles/style.html
rename to styles/style/index.html
index 8b36b4b57b6..e9b659ea07e 100644
--- a/styles/style.html
+++ b/styles/style/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/style-59c48df9291ab1af.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Style prop</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/style-59c48df9291ab1af.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Style prop</h1>
 <p class="MdxTypography_paragraph__Lp7wh">All Mantine components that have root element support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop.
 It works similar to React <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop, but with some additional features.</p>
 <div id="style-object" data-heading="Style object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#style-object">Style object</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can pass a style object to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop – in this case it works the same way
-as React <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop. You can use Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> in style object
-the same way as in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">.css files</a>.</p>
+as React <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop. You can use Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> in style object
+the same way as in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">.css files</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -23,8 +23,8 @@
   );
 }</code></pre></div></div></div></div>
 <div id="style-function" data-heading="Style function" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#style-function">Style function</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can pass a style function to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop – in this case it will be called with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>.
-It is useful when you need to access <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> properties that are not exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>,
+<p class="MdxTypography_paragraph__Lp7wh">You can pass a style function to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">style</code> prop – in this case it will be called with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>.
+It is useful when you need to access <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> properties that are not exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>,
 for example, properties from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.other</code>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Box</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -50,4 +50,4 @@
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params">{ style }: DemoProps</span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[{</span> <span class="hljs-attr">color:</span> &#x27;<span class="hljs-attr">red</span>&#x27; }, <span class="hljs-attr">style</span>]} /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rem"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">rem, em and px units</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/responsive"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Responsive styles</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/style","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rem/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">rem, em and px units</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/responsive/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Responsive styles</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/style","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/styles-api.html b/styles/styles-api/index.html
similarity index 77%
rename from styles/styles-api.html
rename to styles/styles-api/index.html
index 5bbf79b4164..4ade1bd4d51 100644
--- a/styles/styles-api.html
+++ b/styles/styles-api/index.html
@@ -3,17 +3,17 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/styles-api-5dbfd5697d009a06.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Styles API</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/styles-api-5dbfd5697d009a06.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Styles API</h1>
 <div id="what-is-styles-api" data-heading="What is Styles API" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#what-is-styles-api">What is Styles API</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Styles API is a set of props and techniques that allows you to customize styles of any element
-inside Mantine component inline or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>. All Mantine components that
+inside Mantine component inline or with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>. All Mantine components that
 have styles support Styles API.</p>
 <div id="styles-api-selectors" data-heading="Styles API selectors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api-selectors">Styles API selectors</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Every Mantine component that supports Styles API has a set of elements names that can be used to
 apply styles to inner elements inside the component. For simplicity, these elements names are called
 selectors in Mantine documentation. You can find selectors information under <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Styles API</code> tab
 in component documentation.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component selectors:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component selectors:</p>
 <div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Selector</th><th class="m-4e7aa4f3 mantine-Table-th">Static selector</th><th class="m-4e7aa4f3 mantine-Table-th">Description</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->root</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Root element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">loader</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->loader</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Loader component, displayed only when <code>loading</code> prop is set</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">inner</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->inner</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Contains all other elements, child of the <code>root</code> element</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">section</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->section</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Left and right sections of the button</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">label</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">.mantine-<!-- -->Button<!-- -->-<!-- -->label</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Button children</span></td></tr></tbody></table></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">You can use these selectors in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> both in component props and in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.components</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, createTheme, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -99,7 +99,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="classnames-in-themecomponents" data-heading="classNames in theme.components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#classnames-in-themecomponents">classNames in theme.components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can also define classNames in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme.components</a> to apply them to all
+<p class="MdxTypography_paragraph__Lp7wh">You can also define classNames in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme.components</a> to apply them to all
 components of specific type:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -128,11 +128,11 @@
 <div id="components-css-variables" data-heading="Components CSS variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-css-variables">Components CSS variables</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of Mantine components use CSS variables to define colors, sizes, paddings and other
 properties. You can override these values by with a custom CSS variables resolver function
-in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme.components</a> or by passing it to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> prop.</p>
+in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme.components</a> or by passing it to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> prop.</p>
 <p class="MdxTypography_paragraph__Lp7wh">You can find CSS variables information under <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Styles API</code> tab in component documentation.
-Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component CSS variables:</p>
+Example of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component CSS variables:</p>
 <div style="--table-min-width:calc(37.5rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m-a100c15 mantine-TableScrollContainer-scrollContainer m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport" data-offset-scrollbars="x"><div style="min-width:100%;display:table"><div class="m-62259741 mantine-TableScrollContainer-scrollContainerInner"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Selector</th><th class="m-4e7aa4f3 mantine-Table-th">Variable</th><th class="m-4e7aa4f3 mantine-Table-th">Description</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td" rowspan="9">root</td><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-bg</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>background</code></span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-bd</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Control <code>border</code></span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-hover</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>background</code> when hovered</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-color</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Control text <code>color</code></span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-radius</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>border-radius</code></span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-height</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>height</code> of the button</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-padding-x</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls horizontal <code>padding</code> of the button</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-fz</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>font-size</code> of the button</span></td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td"><span class="mantine-focus-auto TableInlineCode_code__TNUKa m-b6d8b162 mantine-Text-root">--button-justify</span></td><td class="m-4e7aa4ef mantine-Table-td"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-docs-inline-code="true">Controls <code>justify-content</code> of <code>inner</code> element</span></td></tr></tbody></table></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Example of custom CSS variables resolver function used to add more sizes to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of custom CSS variables resolver function used to add more sizes to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-height:calc(3.75rem * var(--mantine-scale));--button-padding-x:calc(1.875rem * var(--mantine-scale));--button-fz:calc(1.5rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxl" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXL Button</span></span></button><button style="--button-height:calc(1.5rem * var(--mantine-scale));--button-padding-x:calc(0.625rem * var(--mantine-scale));--button-fz:calc(0.625rem * var(--mantine-scale))" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">XXS Button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>MantineProvider.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Inline.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, rem, <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -219,14 +219,14 @@
 <p class="MdxTypography_paragraph__Lp7wh"><strong>styles prop usage</strong></p>
 <p class="MdxTypography_paragraph__Lp7wh">Some examples and demos in the documentation use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> prop for convenience, but it is not
 recommended to use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> prop as the primary means of styling components, as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code>
-prop is more flexible and has <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-performance">better performance</a>.</p>
+prop is more flexible and has <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-performance/">better performance</a>.</p>
 </blockquote>
 <div id="styles-api-based-on-component-props" data-heading="Styles API based on component props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styles-api-based-on-component-props">Styles API based on component props</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can also pass a callback function to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code>. This function will receive
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> as first argument and component props as second. It should return
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a> as first argument and component props as second. It should return
 object of classes (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code>) or styles (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code>).</p>
 <p class="MdxTypography_paragraph__Lp7wh">You can use this feature to conditionally apply styles based on component props. For example,
-you can change <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a> label color if the input is required or change the input
+you can change <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a> label color if the input is required or change the input
 background color if input has error:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-686577e7 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" data-required="true" for="mantine-Rqn5bblu6" id="mantine-Rqn5bblu6-label">Required input<span class="m-78a94662 mantine-InputWrapper-required mantine-TextInput-required" aria-hidden="true"> *</span></label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="Required input" required="" aria-invalid="false" id="mantine-Rqn5bblu6"/></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R1an5bblu6" id="mantine-R1an5bblu6-label">Input with error</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default" data-error="true"><input class="m-933d67aa m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" data-error="true" placeholder="Input with error" aria-invalid="true" id="mantine-R1an5bblu6"/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> cx <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;clsx&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -254,20 +254,20 @@
 <div id="static-classes" data-heading="Static classes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#static-classes">Static classes</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Every component that supports Styles API also includes static classes that can be used to style
 component without using <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> props. By default, static classes have
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">.mantine-{ComponentName}-{selector}</code> format. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">root</code> selector of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">.mantine-{ComponentName}-{selector}</code> format. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">root</code> selector of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>
 component will have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.mantine-Button-root</code> class.</p>
-<p class="MdxTypography_paragraph__Lp7wh">You can use static classes to style component with CSS or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules#styling-mantine-components-without-css-modules">any other styling solution</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can use static classes to style component with CSS or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/#styling-mantine-components-without-css-modules">any other styling solution</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.mantine-Button-root</span> {
   <span class="hljs-attribute">background-color</span>: red;
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Static classes prefix can be changed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider#classnamesprefix">MantineProvider</a>.</p>
+<p class="MdxTypography_paragraph__Lp7wh">Static classes prefix can be changed with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/#classnamesprefix">MantineProvider</a>.</p>
 <div id="components-classes" data-heading="Components classes" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-classes">Components classes</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Classes of each component are available in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Component.classes</code> object. For example, you can
-find <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> classes in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button.classes</code>:</p>
+find <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> classes in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Button.classes</code>:</p>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Key</th><th class="m-4e7aa4f3 mantine-Table-th">Class</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">root</td><td class="m-4e7aa4ef mantine-Table-td">m-77c9d27d</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">inner</td><td class="m-4e7aa4ef mantine-Table-td">m-80f1301b</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">label</td><td class="m-4e7aa4ef mantine-Table-td">m-811560b9</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">section</td><td class="m-4e7aa4ef mantine-Table-td">m-a74036a</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">loader</td><td class="m-4e7aa4ef mantine-Table-td">m-a25b86ee</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">group</td><td class="m-4e7aa4ef mantine-Table-td">m-80d6d844</td></tr></tbody></table></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">You can use these classes to create components with the same styles as Mantine components:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{Button.classes.root}</span> /&gt;</span></span>;
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/responsive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Responsive styles</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/data-attributes"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">data-* attributes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/styles-api","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/responsive/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Responsive styles</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/data-attributes/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">data-* attributes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/styles-api","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/styles-performance.html b/styles/styles-performance/index.html
similarity index 68%
rename from styles/styles-performance.html
rename to styles/styles-performance/index.html
index 3737c2d4ffa..dd3ed669814 100644
--- a/styles/styles-performance.html
+++ b/styles/styles-performance/index.html
@@ -3,12 +3,12 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/styles-performance-0ae4bc47a8fe3491.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Styles performance</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/styles-performance-0ae4bc47a8fe3491.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Styles performance</h1>
 <div id="css-modules" data-heading="CSS modules" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#css-modules">CSS modules</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> is the most performant way to apply styles –
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> is the most performant way to apply styles –
 this approach generates static CSS that is never re-evaluated. 99% of Mantine components
 styles are generated with CSS modules – components are optimized out of the box.</p>
-<p class="MdxTypography_paragraph__Lp7wh">In most cases, it is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS modules</a> to style your components as well.
+<p class="MdxTypography_paragraph__Lp7wh">In most cases, it is recommended to use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS modules</a> to style your components as well.
 You can apply styles to HTML elements with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code> prop and to Mantine components with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code>,
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> props.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Applying styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">className</code>:</p>
@@ -22,7 +22,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Applying styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> (see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API guide</a> to learn more):</p>
+<p class="MdxTypography_paragraph__Lp7wh">Applying styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> (see <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API guide</a> to learn more):</p>
 <div class="m-761fa02a"><div style="--demo-flex:1;--demo-max-width:calc(22.5rem * var(--mantine-scale));--demo-margin-y:auto" class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-bf550b40 m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-2af14056 m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R59tbblu6" id="mantine-R59tbblu6-label">Floating label input</label><div class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-2acd192c m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" aria-invalid="false" id="mantine-R59tbblu6" value=""/></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextInput</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
@@ -97,12 +97,12 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="style-props" data-heading="Style props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#style-props">Style props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">Style props</a> transform component props into inline styles. Style props have
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">Style props</a> transform component props into inline styles. Style props have
 the same caveats as inline styles, it is not recommended to use them as the primary means of styling
 your components. Usually, style props are used to apply 1–3 styles to a component – using them
 this way does not impact performance.</p>
 <div id="responsive-style-props" data-heading="Responsive style props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#responsive-style-props">Responsive style props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Responsive <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a> have worse performance than regular style props
+<p class="MdxTypography_paragraph__Lp7wh">Responsive <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a> have worse performance than regular style props
 because they require injecting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;style /&gt;</code> tag next to the component. It is fine to use responsive
 style props to apply styles to several components, but it is not recommended to use
 them in large lists of components, for example, if you have 1000 inputs with responsive margins,
@@ -132,7 +132,7 @@
   <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>{inputs}<span class="hljs-tag">&lt;/&gt;</span></span>;
 }</code></pre></div></div></div></div>
 <div id="components-responsive-props" data-heading="Components responsive props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components-responsive-props">Components responsive props</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Some components, like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/simple-grid">SimpleGrid</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid">Grid</a>
+<p class="MdxTypography_paragraph__Lp7wh">Some components, like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/simple-grid/">SimpleGrid</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/grid/">Grid</a>
 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.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rtl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RTL (right-to-left)</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/polymorphic"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Polymorphic components</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/styles-performance","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+them in large lists of components.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/rtl/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">RTL (right-to-left)</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/guides/polymorphic/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Polymorphic components</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/styles-performance","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/unstyled.html b/styles/unstyled/index.html
similarity index 61%
rename from styles/unstyled.html
rename to styles/unstyled/index.html
index 85392638a10..019c87be86f 100644
--- a/styles/unstyled.html
+++ b/styles/unstyled/index.html
@@ -3,16 +3,16 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/unstyled-f1dab855a1ec0cce.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Unstyled components</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/unstyled-f1dab855a1ec0cce.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Unstyled components</h1>
 <div id="using-mantine-as-a-headless-ui-library" data-heading="Using Mantine as a headless UI library" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#using-mantine-as-a-headless-ui-library">Using Mantine as a headless UI library</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can use Mantine as a headless UI library. To do that, simply do not import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/*/styles.css</code>
-in your application. Then you will be able to apply styles to Mantine components using <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>
+in your application. Then you will be able to apply styles to Mantine components using <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>
 with a styling solution of your choice.</p>
 <div id="unstyled-prop" data-heading="unstyled prop" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#unstyled-prop">unstyled prop</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of Mantine components support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop that removes library styles from the component and allows you to style it
 from scratch. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop is not supported by compound components (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs.Tab</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Menu.Dropdown</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Accordion.Control</code>, etc.)
 – it only works on root component (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Menu</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Accordion</code>, etc.).</p>
-<p class="MdxTypography_paragraph__Lp7wh">Unstyled <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs">Tabs</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Unstyled <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs/">Tabs</a> component:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--tabs-radius:var(--mantine-radius-default);--tabs-color:var(--mantine-color-blue-filled)" class="mantine-Tabs-root" data-variant="default" data-orientation="horizontal" id="mantine-R1blbblu6"><div class="mantine-Tabs-list" data-variant="default" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-R1blbblu6-tab-chat" aria-selected="true" tabindex="0" aria-controls="mantine-R1blbblu6-panel-chat"><span class="mantine-Tabs-tabLabel">Chat</span></button><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-R1blbblu6-tab-gallery" aria-selected="false" tabindex="-1" aria-controls="mantine-R1blbblu6-panel-gallery"><span class="mantine-Tabs-tabLabel">Gallery</span></button><button class="mantine-Tabs-tab mantine-UnstyledButton-root" data-variant="default" data-orientation="horizontal" type="button" role="tab" id="mantine-R1blbblu6-tab-account" aria-selected="false" tabindex="-1" aria-controls="mantine-R1blbblu6-panel-account"><span class="mantine-Tabs-tabLabel">Account</span></button></div><div class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1blbblu6-panel-chat" aria-labelledby="mantine-R1blbblu6-tab-chat">Chat panel</div><div style="display:none" class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1blbblu6-panel-gallery" aria-labelledby="mantine-R1blbblu6-tab-gallery">Gallery panel</div><div style="display:none" class="mantine-Tabs-panel" data-orientation="horizontal" role="tabpanel" id="mantine-R1blbblu6-panel-account" aria-labelledby="mantine-R1blbblu6-tab-account">Account panel</div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Tabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -33,10 +33,10 @@
 <blockquote style="--bq-bg-light:rgba(34, 139, 230, 0.07);--bq-bg-dark:rgba(25, 113, 194, 0.06);--bq-bd:var(--mantine-color-blue-filled);--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="MdxInfo_icon__uA1Pv"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span>
 <p class="MdxTypography_paragraph__Lp7wh"><strong>Choosing between unstyled prop and headless components</strong></p>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop is useful when you want to remove library styles from a single component,
-but keep styles for other components. For example, if <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs">Tabs</a> component does
+but keep styles for other components. For example, if <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs/">Tabs</a> component does
 not meet your design system requirements, but all other components do, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code>
 prop to remove styles from Tabs and style it from scratch, while keeping all other components
 styled with Mantine styles.</p>
 <p class="MdxTypography_paragraph__Lp7wh">Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop does not remove Mantine library styles from your <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.css</code> bundle –
 it only does not apply them to component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">unstyled</code> prop.</p>
-</blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/variants-sizes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Variants and sizes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style-props"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Style props</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/unstyled","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/variants-sizes/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Variants and sizes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/style-props/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Style props</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/unstyled","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/vanilla-extract.html b/styles/vanilla-extract/index.html
similarity index 71%
rename from styles/vanilla-extract.html
rename to styles/vanilla-extract/index.html
index f7ad9443f98..2bea32a32c2 100644
--- a/styles/vanilla-extract.html
+++ b/styles/vanilla-extract/index.html
@@ -3,27 +3,27 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/vanilla-extract-2d99f12f2f66ae75.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Vanilla extract integration</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/vanilla-extract-2d99f12f2f66ae75.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Vanilla extract integration</h1>
 <p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> is a TypeScript CSS preprocessor that generates static CSS files at build time.
-It is a great alternative to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a> if you prefer to write your styles in TypeScript.</p>
+It is a great alternative to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a> if you prefer to write your styles in TypeScript.</p>
 <div id="vanilla-extract-vs-css-modules" data-heading="Vanilla extract vs CSS Modules" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#vanilla-extract-vs-css-modules">Vanilla extract vs CSS Modules</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a> do the same thing,
-but with different syntax. Common features of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a> do the same thing,
+but with different syntax. Common features of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a>:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">Styles are generated at build time – no runtime and performance overhead</li>
 <li class="MdxTypography_li__JpNrx">Classes names are scoped to the styles file</li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Differences between <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Differences between <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a>:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx">Vanilla extract styles are type safe</li>
-<li class="MdxTypography_li__JpNrx">You can use any JavaScript/TypeScript code in Vanilla extract styles, including <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/color-functions">color functions</a></li>
-<li class="MdxTypography_li__JpNrx">With Vanilla extract you do not have access to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> features like <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light-dark</code> function and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hover</code> mixin.
+<li class="MdxTypography_li__JpNrx">You can use any JavaScript/TypeScript code in Vanilla extract styles, including <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/color-functions/">color functions</a></li>
+<li class="MdxTypography_li__JpNrx">With Vanilla extract you do not have access to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> features like <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light-dark</code> function and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">hover</code> mixin.
 Because of this, you will not be able to copy-paste all demos from Mantine documentation and use them with Vanilla extract.</li>
 <li class="MdxTypography_li__JpNrx">Vanilla extract requires additional configuration and setup that may not be available for your build tool/framework.
 Most popular tools like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://nextjs.org/">Next.js</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vitejs.dev/">Vite</a> have plugins for Vanilla extract,
 but if you are using something more niche, you might need to configure it yourself.</li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh">Note that you can use both <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules">CSS Modules</a> in the same project,
+<p class="MdxTypography_paragraph__Lp7wh">Note that you can use both <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/">Vanilla extract</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-modules/">CSS Modules</a> in the same project,
 it will not cause any issues: performance will be the same and the bundle size will not be impacted.</p>
 <div id="installation" data-heading="Installation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#installation">Installation</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Follow the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/documentation/getting-started">installation instructions</a> to install vanilla extract.
@@ -36,7 +36,7 @@
 <div id="theming" data-heading="Theming" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theming">Theming</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Vanilla extract provides <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vanilla-extract.style/documentation/theming/">createTheme</a>
 function which converts given theme object into CSS variables and assigns them to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code> or other selector.
-You should not use Vanilla extract <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createTheme</code> to generate Mantine theme tokens – all Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>
+You should not use Vanilla extract <code class="m-b183c0a2 mantine-Code-root" dir="ltr">createTheme</code> to generate Mantine theme tokens – all Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>
 properties are already exposed as CSS variables. Instead, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">themeToVars</code> function from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/vanilla-extract</code> package
 to create an object with CSS variables from Mantine theme:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// theme.ts</span>
@@ -52,7 +52,7 @@
 <span class="hljs-comment">// CSS variables object, can be access in *.css.ts files</span>
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> vars = <span class="hljs-title function_">themeToVars</span>(theme);</code></pre></div></div></div></div>
 <div id="styling" data-heading="Styling" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#styling">Styling</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> object in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">*.css.ts</code> files to access Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> object in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">*.css.ts</code> files to access Mantine <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Demo.css.ts</span>
 <span class="hljs-keyword">import</span> { vars } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./theme&#x27;</span>;
 <span class="hljs-keyword">import</span> { style } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vanilla-extract/css&#x27;</span>;
@@ -63,7 +63,7 @@
   <span class="hljs-attr">color</span>: vars.<span class="hljs-property">colors</span>.<span class="hljs-property">white</span>,
 });</code></pre></div></div></div></div>
 <div id="rem-and-em" data-heading="rem and em" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#rem-and-em">rem and em</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To convert px to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem or em</a> use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> functions from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package:</p>
+<p class="MdxTypography_paragraph__Lp7wh">To convert px to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem or em</a> use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">rem</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">em</code> functions from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-comment">// Demo.css.ts</span>
 <span class="hljs-keyword">import</span> { rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { style } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vanilla-extract/css&#x27;</span>;
@@ -162,4 +162,4 @@
       <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">0</span>,
     },
   },
-});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/postcss-preset"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PostCSS preset</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/global-styles"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Global styles</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/vanilla-extract","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+});</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/postcss-preset/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">PostCSS preset</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/global-styles/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Global styles</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/vanilla-extract","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/styles/variants-sizes.html b/styles/variants-sizes/index.html
similarity index 75%
rename from styles/variants-sizes.html
rename to styles/variants-sizes/index.html
index b9e6542e13a..7853052b2c4 100644
--- a/styles/variants-sizes.html
+++ b/styles/variants-sizes/index.html
@@ -3,12 +3,12 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/variants-sizes-c932d28197612170.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/variants-sizes">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Variants and sizes</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/styles/variants-sizes-c932d28197612170.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-modules/">CSS modules</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/postcss-preset/">PostCSS preset</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/vanilla-extract/">Vanilla extract</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/global-styles/">Global styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/css-variables/">CSS variables</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rem/">rem, em and px units</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style/">style prop</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/responsive/">Responsive styles</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-api/">Styles API</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/data-attributes/">data-* attributes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/styles/variants-sizes/">Variants and sizes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/unstyled/">Unstyled / headless</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/style-props/">Style props</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/color-functions/">Color functions</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/rtl/">RTL (right-to-left)</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/styles/styles-performance/">Styles performance</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Variants and sizes</h1>
 <div id="adding-custom-variants" data-heading="Adding custom variants" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#adding-custom-variants">Adding custom variants</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Most of Mantine components support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant</code> prop, it can be used in CSS variables resolver,
 and it is also exposed as <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-variant=&quot;{value}&quot;</code> attribute on the root element of the component.
 The easiest way to add custom variants is to add styles that use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">[data-variant=&quot;{value}&quot;]</code>.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Example of adding a new variant to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> component:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Example of adding a new variant to the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> component:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">underline</code> variant styles are added</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">filled</code> variant is a default variant – you do not need to define any additional styles for it</li>
@@ -32,16 +32,16 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Note that you can add custom variants to every Mantine component that supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a>
+<p class="MdxTypography_paragraph__Lp7wh">Note that you can add custom variants to every Mantine component that supports <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a>
 even if there are no variants defined on the library side.</p>
 <blockquote style="--bq-bg-light:rgba(34, 139, 230, 0.07);--bq-bg-dark:rgba(25, 113, 194, 0.06);--bq-bd:var(--mantine-color-blue-filled);--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="MdxInfo_icon__uA1Pv"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span>
 <p class="MdxTypography_paragraph__Lp7wh"><strong>Overriding existing variants styles</strong></p>
 <p class="MdxTypography_paragraph__Lp7wh">Apart from adding new variants, you can also override existing ones, for example, you can change the
-<code class="m-b183c0a2 mantine-Code-root" dir="ltr">filled</code> variant of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input">Input</a> component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.input[data-variant=&quot;filled&quot;]</code> selector.</p>
+<code class="m-b183c0a2 mantine-Code-root" dir="ltr">filled</code> variant of the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/input/">Input</a> component with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">.input[data-variant=&quot;filled&quot;]</code> selector.</p>
 </blockquote>
 <div id="variantcolorresolver" data-heading="variantColorResolver" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#variantcolorresolver">variantColorResolver</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a> and other
-components support custom variants with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors#colors-variant-resolver">variantColorResolver</a>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a> and other
+components support custom variants with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/colors/#colors-variant-resolver">variantColorResolver</a>
 – it supports both changing colors and adding new variants. Note that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.variantColorResolver</code> is
 responsible only for colors, if you need to change other properties, use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-variant</code> attribute.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-lime-4);--button-hover:var(--mantine-color-lime-5);--button-color:var(--mantine-color-black);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Lime filled button</span></span></button><button style="--button-bg:rgba(253, 126, 20, 0.1);--button-hover:rgba(253, 126, 20, 0.15);--button-color:rgba(228, 113, 18, 1);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid #fd7e14" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="light" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Orange light button</span></span></button><button style="--button-bg:var(--mantine-color-red-9);--button-hover:var(--mantine-color-red-8);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="danger" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Danger button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> {
@@ -175,7 +175,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="sizes-with-static-css-variables" data-heading="Sizes with static CSS variables" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#sizes-with-static-css-variables">Sizes with static CSS variables</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine components sizes are defined with CSS variables (usually on root element), for example,
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a> component has the following CSS variables:</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a> component has the following CSS variables:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.root</span> {
   <span class="hljs-attr">--ai-size-xs</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">18px</span>);
   <span class="hljs-attr">--ai-size-sm</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">22px</span>);
@@ -183,13 +183,13 @@
   <span class="hljs-attr">--ai-size-lg</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">34px</span>);
   <span class="hljs-attr">--ai-size-xl</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">44px</span>);
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">You can override these values with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> or add new sizes values:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can override these values with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> or add new sizes values:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><div style="--group-justify:center" class="m-4081bf90 mantine-Group-root"><button style="--ai-size:var(--ai-size-xxs)" class="mantine-focus-auto mantine-active m-2be4ed51 m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxs" type="button" aria-label="Custom xxs size"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart" style="width:calc(0.625rem * var(--mantine-scale));height:calc(0.625rem * var(--mantine-scale))"><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"></path></svg></button><button style="--ai-size:var(--ai-size-xxl)" class="mantine-focus-auto mantine-active m-2be4ed51 m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-size="xxl" type="button" aria-label="Custom xxl size"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart" style="width:calc(2rem * var(--mantine-scale));height:calc(2rem * var(--mantine-scale))"><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"></path></svg></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-selector-class">.root</span> {
   <span class="hljs-attr">--ai-size-xxs</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">16px</span>);
   <span class="hljs-attr">--ai-size-xxl</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">50px</span>);
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Note that some components have more than one CSS variable for size, for example,
-the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component has the following CSS variables:</p>
+the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component has the following CSS variables:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-selector-class">.root</span> {
   <span class="hljs-attr">--button-height-xs</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">30px</span>);
   <span class="hljs-attr">--button-height-sm</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">36px</span>);
@@ -215,5 +215,5 @@
   <span class="hljs-attr">--button-padding-x-compact-lg</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">12px</span>);
   <span class="hljs-attr">--button-padding-x-compact-xl</span>: <span class="hljs-built_in">rem</span>(<span class="hljs-number">14px</span>);
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Usually, it is more convenient to use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-size</code> attribute or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a>
-to customize sizes in this case.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/data-attributes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">data-* attributes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/unstyled"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Unstyled / headless</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/variants-sizes","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<p class="MdxTypography_paragraph__Lp7wh">Usually, it is more convenient to use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-size</code> attribute or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">vars</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme</a>
+to customize sizes in this case.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/data-attributes/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">data-* attributes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/unstyled/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Unstyled / headless</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/styles/variants-sizes","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/templates-usage.html b/templates-usage/index.html
similarity index 72%
rename from templates-usage.html
rename to templates-usage/index.html
index 22a67d5c413..d7f036d47db 100644
--- a/templates-usage.html
+++ b/templates-usage/index.html
@@ -3,11 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/templates-usage-8bb5f21805048000.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Templates</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/templates-usage-8bb5f21805048000.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Templates</h1>
 <p class="MdxTypography_paragraph__Lp7wh">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.
-You can find a list of all available templates on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started">getting started page</a>.</p>
+You can find a list of all available templates on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/getting-started/">getting started page</a>.</p>
 <div id="getting-started-with-a-template" data-heading="Getting started with a template" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#getting-started-with-a-template">Getting started with a template</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">To get started with one of the templates:</p>
 <ul class="MdxTypography_ul__pQ83b">
@@ -28,4 +28,4 @@
 <li class="MdxTypography_li__JpNrx">Extract downloaded archive</li>
 <li class="MdxTypography_li__JpNrx">Install dependencies by running <code class="m-b183c0a2 mantine-Code-root" dir="ltr">yarn</code></li>
 <li class="MdxTypography_li__JpNrx">Start development server by running <code class="m-b183c0a2 mantine-Code-root" dir="ltr">yarn dev</code>/<code class="m-b183c0a2 mantine-Code-root" dir="ltr">yarn start</code> (exact command depends on the framework of the template)</li>
-</ul></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/templates-usage","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+</ul></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/templates-usage","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/color-schemes.html b/theming/color-schemes/index.html
similarity index 75%
rename from theming/color-schemes.html
rename to theming/color-schemes/index.html
index 4e734083339..831d4d1c90d 100644
--- a/theming/color-schemes.html
+++ b/theming/color-schemes/index.html
@@ -3,8 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/color-schemes-c986bddd4d4fdcff.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Color schemes</h1>
-<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> manages color scheme context in your application.
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/color-schemes-c986bddd4d4fdcff.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Color schemes</h1>
+<p class="MdxTypography_paragraph__Lp7wh"><a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> manages color scheme context in your application.
 You can configure the default color scheme value with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">defaultColorScheme</code> prop, possible values are <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>,
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code> (system color scheme is used). The default value is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -17,7 +17,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="data-mantine-color-scheme-attribute" data-heading="data-mantine-color-scheme attribute" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#data-mantine-color-scheme-attribute">data-mantine-color-scheme attribute</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">When <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> is mounted, it sets <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code>
+<p class="MdxTypography_paragraph__Lp7wh">When <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> is mounted, it sets <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code>
 attribute on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;html /&gt;</code> element to the value that the user has selected previously or to the value of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">defaultColorScheme</code> prop.
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code> attribute is used in all components styles to determine which colors should component use.</p>
 <div id="use-mantine-color-scheme-hook" data-heading="use-mantine-color-scheme hook" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#use-mantine-color-scheme-hook">use-mantine-color-scheme hook</a></h2>
@@ -80,9 +80,9 @@
 before the component is mounted to avoid flash of inaccurate color scheme. This means that
 color scheme value can be different on client and server, as server does not have access
 to local storage and always uses the default value.</p>
-<p class="MdxTypography_paragraph__Lp7wh">If you have server side rendering in your application (for example, if you use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/next">Next.js</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/remix">Remix</a>), then you cannot use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorScheme</code>
+<p class="MdxTypography_paragraph__Lp7wh">If you have server side rendering in your application (for example, if you use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/next/">Next.js</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/remix/">Remix</a>), then you cannot use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorScheme</code>
 value in your application to avoid hydration issues. Instead, you can use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>
-mixins from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset">postcss-preset-mantine</a> to generate styles that will
+mixins from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/postcss-preset/">postcss-preset-mantine</a> to generate styles that will
 hide elements based on color scheme value:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--ai-size:var(--ai-size-xl);--ai-bg:var(--mantine-color-default);--ai-hover:var(--mantine-color-default-hover);--ai-color:var(--mantine-color-default-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)" class="mantine-focus-auto mantine-active m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="default" data-size="xl" type="button" aria-label="Toggle color scheme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-42f1bae m-81e13c81"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-42f1bae m-42cceab"><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"></path></svg></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">ActionIcon</span>, useMantineColorScheme, useComputedColorScheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { <span class="hljs-title class_">IconSun</span>, <span class="hljs-title class_">IconMoon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@tabler/icons-react&#x27;</span>;
@@ -114,7 +114,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSchemeScript</code> component renders script tag that sets <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code> attribute
 on <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;html /&gt;</code> element to user selected value or to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">defaultColorScheme</code> prop value before
 hydration. It is used to avoid flash of inaccurate color scheme in server side rendered applications,
-for example <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/next">Next.js</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/remix">Remix</a>. Follows framework specific guides
+for example <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/next/">Next.js</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/guides/remix/">Remix</a>. Follows framework specific guides
 to learn where to render <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSchemeScript</code> component.</p>
 <p class="MdxTypography_paragraph__Lp7wh">You can add any additional props to the <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;script /&gt;</code> tag generated by <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSchemeScript</code> component,
 for example, you can add <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce">nonce</a> attribute:</p>
@@ -201,7 +201,7 @@
     },
   };
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Then custom color scheme manager can be passed to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Then custom color scheme manager can be passed to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> { localStorageColorSchemeManager } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./localStorageColorSchemeManager&#x27;</span>;
 
@@ -216,7 +216,7 @@
 }</code></pre></div></div></div></div>
 <div id="default-color-scheme" data-heading="Default color scheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-color-scheme">Default color scheme</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">The default color scheme value is used when the user has not selected any color scheme yet.
-It is required to be set both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> and
+It is required to be set both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> and
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSchemeScript</code>. If <code class="m-b183c0a2 mantine-Code-root" dir="ltr">defaultColorScheme</code> is not set, then <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code> is used –
 your application color scheme will depend on the system color scheme.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">ColorSchemeScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -233,7 +233,7 @@
 }</code></pre></div></div></div></div>
 <div id="force-color-scheme" data-heading="Force color scheme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#force-color-scheme">Force color scheme</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can force the color scheme value to be either <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">forceColorScheme</code> prop.
-It is required to be set both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> and
+It is required to be set both on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> and
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">ColorSchemeScript</code>. If <code class="m-b183c0a2 mantine-Code-root" dir="ltr">forceColorScheme</code> is set, then <code class="m-b183c0a2 mantine-Code-root" dir="ltr">defaultColorScheme</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorSchemeManager</code> are ignored.
 When <code class="m-b183c0a2 mantine-Code-root" dir="ltr">forceColorScheme</code> is set, it is not possible to change color scheme value with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">setColorScheme</code> function.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">ColorSchemeScript</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -247,4 +247,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span>
     <span class="hljs-tag">&lt;/&gt;</span></span>
   );
-}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Colors</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/typography"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Typography</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/color-schemes","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/colors/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Colors</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/typography/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Typography</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/color-schemes","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/colors.html b/theming/colors/index.html
similarity index 91%
rename from theming/colors.html
rename to theming/colors/index.html
index 13aefe06368..8b2df7102ae 100644
--- a/theming/colors.html
+++ b/theming/colors/index.html
@@ -3,22 +3,22 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/e5f75161ef22fdc6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f75161ef22fdc6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/colors-e98bfc4e145270b8.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Colors</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><link rel="preload" href="/_next/static/css/e5f75161ef22fdc6.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f75161ef22fdc6.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/colors-e98bfc4e145270b8.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Colors</h1>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine uses <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://yeun.github.io/open-color/">open-color</a> in default theme with some additions.
 Each color has 10 shades.</p>
-<p class="MdxTypography_paragraph__Lp7wh">Colors are exposed on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a> as an array of strings,
+<p class="MdxTypography_paragraph__Lp7wh">Colors are exposed on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a> as an array of strings,
 you can access color shade by color name and index (0-9), colors with larger index are darker:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code">theme.<span class="hljs-property">colors</span>.<span class="hljs-property">red</span>[<span class="hljs-number">5</span>];
 theme.<span class="hljs-property">colors</span>.<span class="hljs-property">gray</span>[<span class="hljs-number">9</span>];
 theme.<span class="hljs-property">colors</span>.<span class="hljs-property">blue</span>[<span class="hljs-number">0</span>];</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Colors are also exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Colors are also exposed as <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-attr">--mantine-color-red-5</span>;
 <span class="hljs-attr">--mantine-color-gray-9</span>;
 <span class="hljs-attr">--mantine-color-blue-0</span>;</code></pre></div></div></div></div>
 <div id="adding-extra-colors" data-heading="Adding extra colors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#adding-extra-colors">Adding extra colors</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can add any number of extra colors to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.colors</code> object.
 This will allow you to use them in all components that support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop, for example
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/switch">Switch</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/switch/">Switch</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-bg:var(--mantine-color-ocean-blue-filled);--button-hover:var(--mantine-color-ocean-blue-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Ocean blue button</span></span></button><button style="--button-bg:var(--mantine-color-bright-pink-filled);--button-hover:var(--mantine-color-bright-pink-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Bright pink button</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Group</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -42,7 +42,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><strong>10 shades per color</strong></p>
 <p class="MdxTypography_paragraph__Lp7wh">Colors override must include <strong>at least 10 shades per color</strong>. Otherwise, you will get a TypeScript error
 and some variants will not have proper colors. If you only have one color value, you can either
-pick the remaining colors manually or use the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator">colors generator tool</a>.</p>
+pick the remaining colors manually or use the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator/">colors generator tool</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver,
 but you can still reference them by index, for example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color=&quot;blue.11&quot;</code>.</p>
 </blockquote>
@@ -164,7 +164,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" type="button">Expand code</button></div></div>
 <div id="colors-index-reference" data-heading="Colors index reference" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors-index-reference">Colors index reference</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can reference colors by index in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style props</a>, for example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">c</code> prop:</p>
+<p class="MdxTypography_paragraph__Lp7wh">You can reference colors by index in <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style props</a>, for example <code class="m-b183c0a2 mantine-Code-root" dir="ltr">c</code> prop:</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p style="color:var(--mantine-color-blue-6)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Text with blue.<!-- -->6<!-- --> color</p><button style="--button-bg:var(--mantine-color-cyan-6);--button-hover:var(--mantine-color-cyan-7);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-top:var(--mantine-spacing-sm)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button</span></span></button></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="number"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkmlbblu6-label">Index</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(66.66666666666666% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:66.66666666666666%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="9" aria-valuemin="0" aria-valuenow="6"></div><div></div></div></div><input type="hidden" value="6"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Text</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -178,14 +178,14 @@
 <div id="difference-between-color-and-c-props" data-heading="Difference between color and c props" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#difference-between-color-and-c-props">Difference between color and c props</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop is used to control multiple CSS properties of the component. These properties can vary across different components,
 but usually <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop controls <code class="m-b183c0a2 mantine-Code-root" dir="ltr">background</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">border-color</code> CSS properties. For example,
-when you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color=&quot;#C3FF36&quot;</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> component (with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;filled&quot;</code>), it will set the following CSS properties:</p>
+when you set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color=&quot;#C3FF36&quot;</code> on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> component (with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;filled&quot;</code>), it will set the following CSS properties:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">background-color</code> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">#C3FF36</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">background-color</code> when button is hovered to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">#B0E631</code> (<code class="m-b183c0a2 mantine-Code-root" dir="ltr">#C3FF36</code> darkened by 10%)</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">var(--mantine-color-white)</code></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">border-color</code> to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">transparent</code></li>
 </ul>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">c</code> is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props">style prop</a> – it is responsible for setting a single CSS property <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> (color of the text).
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">c</code> is a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/style-props/">style prop</a> – it is responsible for setting a single CSS property <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> (color of the text).
 You can combine both props to achieve better contrast between text and background. In the following example:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">color</code> prop sets all <code class="m-b183c0a2 mantine-Code-root" dir="ltr">background: #C3FF36</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">color: var(--mantine-color-white)</code></li>
@@ -202,7 +202,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="colors-variant-resolver" data-heading="Colors variant resolver" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors-variant-resolver">Colors variant resolver</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.variantColorResolver</code> is a function that is used to determine which colors will be used
-in different variants in the following components: <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/alert">Alert</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/avatar">Avatar</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>.</p>
+in different variants in the following components: <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/alert/">Alert</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/avatar/">Avatar</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>.</p>
 <p class="MdxTypography_paragraph__Lp7wh">It accepts an object argument with the following properties:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">VariantColorsResolverInput</span> {
   <span class="hljs-comment">/** `color` prop passed to component */</span>
@@ -291,7 +291,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="colors-generation" data-heading="Colors generation" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#colors-generation">Colors generation</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator">colors generator</a> to generate 10 shades of color based on a single value
+<p class="MdxTypography_paragraph__Lp7wh">You can use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/colors-generator/">colors generator</a> to generate 10 shades of color based on a single value
 or install <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/colors-generator</code> package to generate dynamic colors in your application:</p>
 <div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="MdxNpmScript_root__unqBU m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))" class="MdxNpmScript_icon__8BVo7"><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"></path><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"></path></svg></span><span>yarn</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg class="MdxNpmScript_icon__8BVo7" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path d="M0 256V0h256v256z" fill="#C12127"></path><path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF"></path></svg></span><span>npm</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code">yarn add chroma-js @mantine/colors-generator</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
 <p class="MdxTypography_paragraph__Lp7wh">The package exports <code class="m-b183c0a2 mantine-Code-root" dir="ltr">generateColors</code> function that accepts a color value and returns an array of 10 shades.
@@ -315,4 +315,4 @@
   );
 }</code></pre></div></div></div></div>
 <div id="default-colors" data-heading="Default colors" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-colors">Default colors</a></h2>
-<div class="ThemeColors_root__YibUj"><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C1C2C5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#C1C2C5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#A6A7AB"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#A6A7AB</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#909296"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#909296</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c5f66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c5f66</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#373A40"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#373A40</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2C2E33"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2C2E33</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#25262b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#25262b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1A1B1E"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1A1B1E</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#141517"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#141517</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#101113"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#101113</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f8f9fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f8f9fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f1f3f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f1f3f5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e9ecef"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e9ecef</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dee2e6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#dee2e6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ced4da"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ced4da</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#adb5bd"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#adb5bd</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#868e96"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#868e96</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#495057"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#495057</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#343a40"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#343a40</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#212529"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#212529</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff5f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff5f5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe3e3"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe3e3</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffc9c9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffc9c9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffa8a8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffa8a8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff8787"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff8787</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff6b6b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff6b6b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fa5252"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fa5252</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f03e3e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f03e3e</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e03131"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e03131</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c92a2a"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c92a2a</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff0f6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff0f6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffdeeb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffdeeb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fcc2d7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fcc2d7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#faa2c1"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#faa2c1</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f783ac"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f783ac</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f06595"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f06595</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e64980"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e64980</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d6336c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d6336c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c2255c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c2255c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a61e4d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a61e4d</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f8f0fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f8f0fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f3d9fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f3d9fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#eebefa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#eebefa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e599f7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e599f7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#da77f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#da77f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#cc5de8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#cc5de8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#be4bdb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#be4bdb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ae3ec9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ae3ec9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#9c36b5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#9c36b5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#862e9c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#862e9c</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f3f0ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f3f0ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e5dbff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e5dbff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d0bfff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d0bfff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b197fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#b197fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#9775fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#9775fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#845ef7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#845ef7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7950f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#7950f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7048e8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#7048e8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6741d9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#6741d9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5f3dc4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5f3dc4</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#edf2ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#edf2ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dbe4ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#dbe4ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#bac8ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#bac8ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#91a7ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#91a7ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#748ffc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#748ffc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c7cfa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c7cfa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4c6ef5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4c6ef5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4263eb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4263eb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#3b5bdb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#3b5bdb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#364fc7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#364fc7</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e7f5ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e7f5ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d0ebff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d0ebff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a5d8ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a5d8ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#74c0fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#74c0fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4dabf7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4dabf7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#339af0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#339af0</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#228be6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#228be6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1c7ed6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1c7ed6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1971c2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1971c2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1864ab"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1864ab</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e3fafc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e3fafc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c5f6fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c5f6fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#99e9f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#99e9f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#66d9e8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#66d9e8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#3bc9db"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#3bc9db</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#22b8cf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#22b8cf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#15aabf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#15aabf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1098ad"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1098ad</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0c8599"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0c8599</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0b7285"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0b7285</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e6fcf5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e6fcf5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c3fae8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c3fae8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#96f2d7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#96f2d7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#63e6be"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#63e6be</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#38d9a9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#38d9a9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#20c997"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#20c997</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#12b886"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#12b886</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0ca678"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0ca678</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#099268"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#099268</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#087f5b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#087f5b</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ebfbee"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ebfbee</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d3f9d8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d3f9d8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b2f2bb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#b2f2bb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#8ce99a"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#8ce99a</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#69db7c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#69db7c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#51cf66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#51cf66</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#40c057"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#40c057</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#37b24d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#37b24d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2f9e44"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2f9e44</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2b8a3e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2b8a3e</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f4fce3"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f4fce3</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e9fac8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e9fac8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d8f5a2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d8f5a2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c0eb75"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c0eb75</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a9e34b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a9e34b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#94d82d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#94d82d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#82c91e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#82c91e</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#74b816"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#74b816</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#66a80f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#66a80f</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c940d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c940d</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff9db"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff9db</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff3bf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff3bf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffec99"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffec99</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe066"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe066</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffd43b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffd43b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fcc419"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fcc419</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fab005"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fab005</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f59f00"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f59f00</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f08c00"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f08c00</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e67700"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e67700</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff4e6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff4e6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe8cc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe8cc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffd8a8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffd8a8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffc078"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffc078</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffa94d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffa94d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff922b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff922b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fd7e14"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fd7e14</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f76707"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f76707</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e8590c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e8590c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d9480f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d9480f</p></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/theme-object"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Theme object</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/color-schemes"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color schemes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/colors","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="ThemeColors_root__YibUj"><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#C1C2C5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#C1C2C5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#A6A7AB"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#A6A7AB</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#909296"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#909296</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c5f66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c5f66</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#373A40"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#373A40</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2C2E33"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2C2E33</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#25262b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#25262b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1A1B1E"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1A1B1E</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#141517"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#141517</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#101113"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">dark<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#101113</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f8f9fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f8f9fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f1f3f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f1f3f5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e9ecef"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e9ecef</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dee2e6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#dee2e6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ced4da"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ced4da</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#adb5bd"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#adb5bd</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#868e96"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#868e96</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#495057"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#495057</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#343a40"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#343a40</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#212529"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">gray<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#212529</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff5f5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff5f5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe3e3"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe3e3</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffc9c9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffc9c9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffa8a8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffa8a8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff8787"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff8787</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff6b6b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff6b6b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fa5252"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fa5252</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f03e3e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f03e3e</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e03131"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e03131</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c92a2a"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">red<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c92a2a</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff0f6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff0f6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffdeeb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffdeeb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fcc2d7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fcc2d7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#faa2c1"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#faa2c1</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f783ac"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f783ac</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f06595"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f06595</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e64980"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e64980</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d6336c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d6336c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c2255c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c2255c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a61e4d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">pink<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a61e4d</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f8f0fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f8f0fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f3d9fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f3d9fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#eebefa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#eebefa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e599f7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e599f7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#da77f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#da77f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#cc5de8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#cc5de8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#be4bdb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#be4bdb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ae3ec9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ae3ec9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#9c36b5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#9c36b5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#862e9c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">grape<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#862e9c</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f3f0ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f3f0ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e5dbff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e5dbff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d0bfff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d0bfff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b197fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#b197fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#9775fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#9775fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#845ef7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#845ef7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7950f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#7950f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#7048e8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#7048e8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#6741d9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#6741d9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5f3dc4"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">violet<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5f3dc4</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#edf2ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#edf2ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#dbe4ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#dbe4ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#bac8ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#bac8ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#91a7ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#91a7ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#748ffc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#748ffc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c7cfa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c7cfa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4c6ef5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4c6ef5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4263eb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4263eb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#3b5bdb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#3b5bdb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#364fc7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">indigo<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#364fc7</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e7f5ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e7f5ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d0ebff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d0ebff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a5d8ff"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a5d8ff</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#74c0fc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#74c0fc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#4dabf7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#4dabf7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#339af0"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#339af0</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#228be6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#228be6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1c7ed6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1c7ed6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1971c2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1971c2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1864ab"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">blue<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1864ab</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e3fafc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e3fafc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c5f6fa"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c5f6fa</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#99e9f2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#99e9f2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#66d9e8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#66d9e8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#3bc9db"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#3bc9db</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#22b8cf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#22b8cf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#15aabf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#15aabf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#1098ad"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#1098ad</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0c8599"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0c8599</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0b7285"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">cyan<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0b7285</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e6fcf5"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e6fcf5</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c3fae8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c3fae8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#96f2d7"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#96f2d7</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#63e6be"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#63e6be</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#38d9a9"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#38d9a9</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#20c997"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#20c997</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#12b886"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#12b886</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#0ca678"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#0ca678</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#099268"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#099268</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#087f5b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">teal<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#087f5b</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ebfbee"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ebfbee</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d3f9d8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d3f9d8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#b2f2bb"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#b2f2bb</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#8ce99a"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#8ce99a</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#69db7c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#69db7c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#51cf66"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#51cf66</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#40c057"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#40c057</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#37b24d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#37b24d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2f9e44"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2f9e44</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#2b8a3e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">green<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#2b8a3e</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f4fce3"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f4fce3</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e9fac8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e9fac8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d8f5a2"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d8f5a2</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#c0eb75"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#c0eb75</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#a9e34b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#a9e34b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#94d82d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#94d82d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#82c91e"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#82c91e</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#74b816"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#74b816</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#66a80f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#66a80f</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#5c940d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">lime<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#5c940d</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff9db"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff9db</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff3bf"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff3bf</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffec99"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffec99</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe066"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe066</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffd43b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffd43b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fcc419"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fcc419</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fab005"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fab005</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f59f00"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f59f00</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f08c00"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f08c00</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e67700"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">yellow<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e67700</p></div></div></div></div><div class="ColorsGroup_wrapper__CL3j0"><div class="ColorsGroup_group__XrmQh"><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fff4e6"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->0</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fff4e6</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffe8cc"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->1</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffe8cc</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffd8a8"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->2</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffd8a8</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffc078"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->3</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffc078</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ffa94d"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->4</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ffa94d</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#ff922b"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->5</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#ff922b</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#fd7e14"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->6</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#fd7e14</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#f76707"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->7</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#f76707</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#e8590c"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->8</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#e8590c</p></div></div><div class="ColorsGroup_color__h_UQT"><div style="--cs-radius:var(--mantine-radius-md)" class="mantine-focus-auto ColorsGroup_swatch__TKQN5 m-de3d2490 mantine-ColorSwatch-root"><span class="m-95709ac0 mantine-ColorSwatch-alphaOverlay"></span><span class="m-98ae7f22 mantine-ColorSwatch-shadowOverlay"></span><span class="m-862f3d1b mantine-ColorSwatch-colorOverlay" style="background-color:#d9480f"></span><span class="m-93e74e3 mantine-ColorSwatch-childrenOverlay"></span></div><div style="margin-top:calc(0.4375rem * var(--mantine-scale))" class=""><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs)" class="mantine-focus-auto ColorsGroup_colorName__iVJUN m-b6d8b162 mantine-Text-root" data-size="xs">orange<!-- --> <!-- -->9</p><p style="--text-fz:var(--mantine-font-size-xs);--text-lh:var(--mantine-line-height-xs);margin-top:calc(0.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:calc(0.625rem * var(--mantine-scale));text-transform:uppercase" class="mantine-focus-auto m-b6d8b162 mantine-Text-root" data-size="xs">#d9480f</p></div></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/theme-object/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Theme object</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/color-schemes/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color schemes</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/colors","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/default-props.html b/theming/default-props/index.html
similarity index 67%
rename from theming/default-props.html
rename to theming/default-props/index.html
index 8734e5fc240..39e809a12a3 100644
--- a/theming/default-props.html
+++ b/theming/default-props/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/default-props-ca4da7cae68f8fdb.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default props</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/default-props-435f082c9754bd64.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default props</h1>
 <p class="MdxTypography_paragraph__Lp7wh">You can define default props for every Mantine component by setting <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.components</code>.
 These props will be used by default by all components of your application unless they are overridden by component props:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button style="--button-bg:transparent;--button-hover:var(--mantine-color-cyan-outline-hover);--button-color:var(--mantine-color-cyan-outline);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-cyan-outline)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="outline" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Default button</span></span></button><button style="--button-bg:var(--mantine-color-red-filled);--button-hover:var(--mantine-color-red-filled-hover);--button-color:var(--mantine-color-white);--button-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="filled" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button with props</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -32,7 +32,7 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="default-props-with-mantinethemeprovider" data-heading="Default props with MantineThemeProvider" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-props-with-mantinethemeprovider">Default props with MantineThemeProvider</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">You can also use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider#mantinethemeprovider">MantineThemeProvider</a> to define default props
+<p class="MdxTypography_paragraph__Lp7wh">You can also use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code> to define default props
 for a part of your application:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineThemeProvider</span>, <span class="hljs-title class_">Button</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -59,7 +59,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="default-props-for-compound-components" data-heading="Default props for compound components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-props-for-compound-components">Default props for compound components</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/menu">Menu</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs">Tabs</a> have associated compound components:
+<p class="MdxTypography_paragraph__Lp7wh">Some components like <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/menu/">Menu</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/tabs/">Tabs</a> have associated compound components:
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Menu.Item</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">Tabs.List</code>, etc.. You can add default props to these components by omitting the dot from component name:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">Menu</span>, <span class="hljs-title class_">Tabs</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -129,4 +129,4 @@
       <span class="hljs-tag">&lt;/<span class="hljs-name">MantineThemeProvider</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/typography"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Typography</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-modules"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS modules</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/default-props","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/typography/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Typography</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/styles/css-modules/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">CSS modules</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/default-props","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/default-theme.html b/theming/default-theme/index.html
similarity index 73%
rename from theming/default-theme.html
rename to theming/default-theme/index.html
index faa3a3881c9..ff86b028c47 100644
--- a/theming/default-theme.html
+++ b/theming/default-theme/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/default-theme-1e7f1a5eb268e915.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default theme object</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/default-theme-1e7f1a5eb268e915.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Default theme object</h1>
 <div id="import-default-theme-object" data-heading="Import default theme object" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#import-default-theme-object">Import default theme object</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can import <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DEFAULT_THEME</code> from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">DEFAULT_THEME</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></pre></div></div></div></div>
@@ -275,4 +275,4 @@
   <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
   <span class="hljs-attr">&quot;other&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
   <span class="hljs-attr">&quot;components&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span>
-<span class="hljs-punctuation">}</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/mantine-provider"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MantineProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/default-theme","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<span class="hljs-punctuation">}</span></code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/mantine-provider/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MantineProvider</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/default-theme","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/mantine-provider.html b/theming/mantine-provider/index.html
similarity index 73%
rename from theming/mantine-provider.html
rename to theming/mantine-provider/index.html
index bbfde9322d9..acffeb06516 100644
--- a/theming/mantine-provider.html
+++ b/theming/mantine-provider/index.html
@@ -3,9 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/mantine-provider-dbf707fe736eae0f.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">MantineProvider</h1>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> provides <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a> context value, manages color scheme
-changes and injects <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a>. It must be rendered at the root of your
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/mantine-provider-816e166cf579a4c0.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">MantineProvider</h1>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> provides <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a> context value, manages color scheme
+changes and injects <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a>. It must be rendered at the root of your
 application and should be user only once.</p>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -55,7 +55,7 @@
   children?: <span class="hljs-title class_">React</span>.<span class="hljs-property">ReactNode</span>;
 }</code></pre></div></div></div></div>
 <div id="theme" data-heading="theme" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#theme">theme</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh">Pass <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a> override to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> prop. It will be merged with the default
+<p class="MdxTypography_paragraph__Lp7wh">Pass <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a> override to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> prop. It will be merged with the default
 theme and used in all components.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -75,7 +75,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorSchemeManager</code> is used to retrieve and set color scheme value in external storage. By default,
 <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> uses <code class="m-b183c0a2 mantine-Code-root" dir="ltr">window.localStorage</code> to store color scheme value, but you can pass your own
 implementation to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colorSchemeManager</code> prop. You can learn more about color scheme management in the
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">color schemes guide</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">color schemes guide</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, localStorageColorSchemeManager } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> colorSchemeManager = <span class="hljs-title function_">localStorageColorSchemeManager</span>({ <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;my-app-color-scheme&#x27;</span> });
@@ -92,7 +92,7 @@
 storage, for example during server side rendering or when the user hasn&#x27;t selected a preferred color scheme.
 Possible values are <code class="m-b183c0a2 mantine-Code-root" dir="ltr">light</code>, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">dark</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code>. By default, it is set to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code>,
 which means that the color scheme will be determined based on user system preferences.
-You can learn more about color scheme management in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">color schemes guide</a>.</p>
+You can learn more about color scheme management in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">color schemes guide</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -103,10 +103,10 @@
   );
 }</code></pre></div></div></div></div>
 <div id="cssvariablesselector" data-heading="cssVariablesSelector" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#cssvariablesselector">cssVariablesSelector</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesSelector</code> is a CSS selector to which <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> should be added.
-By default, it is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> generates CSS variables based on given <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme override</a>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesSelector</code> is a CSS selector to which <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables</a> should be added.
+By default, it is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:root</code>. <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> generates CSS variables based on given <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme override</a>
 and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code>, then these variables are rendered into <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;style /&gt;</code> tag next to your application.
-You can learn more about Mantine CSS variables in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables guide</a>.</p>
+You can learn more about Mantine CSS variables in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/">CSS variables guide</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -134,7 +134,7 @@
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">getRootElement</code> is a function that returns the root application (usually <code class="m-b183c0a2 mantine-Code-root" dir="ltr">html</code>) element to set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code> attribute.
 Default value is <code class="m-b183c0a2 mantine-Code-root" dir="ltr">() =&gt; document.documentElement</code> which means that <code class="m-b183c0a2 mantine-Code-root" dir="ltr">data-mantine-color-scheme</code>
 attribute will be added to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;html /&gt;</code> tag. You can learn more about color scheme management in the
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes">color schemes guide</a>.</p>
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/color-schemes/">color schemes guide</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> <span class="hljs-title function_">getRootElement</span> = (<span class="hljs-params"></span>) =&gt; (<span class="hljs-keyword">typeof</span> <span class="hljs-variable language_">window</span> === <span class="hljs-string">&#x27;undefined&#x27;</span> ? <span class="hljs-literal">undefined</span> : <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>);
@@ -158,11 +158,11 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">In this case (default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code>), <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component will have the following classes:</p>
+<p class="MdxTypography_paragraph__Lp7wh">In this case (default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code>), <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component will have the following classes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">mantine-focus-auto</code> – global utility class</li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">m-3nrA4eL</code> – component class, usually a random string, with this class library styles are applied</li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">mantine-Text-root</code> – component static class, part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">mantine-Text-root</code> – component static class, part of <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a></li>
 </ul>
 <p class="MdxTypography_paragraph__Lp7wh">With <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code> you can change only <strong>static class</strong>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Text</span>, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -174,7 +174,7 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
 }</code></pre></div></div></div></div>
-<p class="MdxTypography_paragraph__Lp7wh">Now <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component will have the following classes:</p>
+<p class="MdxTypography_paragraph__Lp7wh">Now <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component will have the following classes:</p>
 <ul class="MdxTypography_ul__pQ83b">
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">mantine-focus-auto</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code> does not impact global utility classes – it is static and <strong>cannot be changed</strong></li>
 <li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">m-3nrA4eL</code> – <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNamesPrefix</code> does not impact library class – it is static and <strong>cannot be changed</strong></li>
@@ -183,35 +183,5 @@
 <div id="getstylenonce" data-heading="getStyleNonce" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#getstylenonce">getStyleNonce</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">getStyleNonce</code> is a function to generate <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce">nonce</a> attribute added to dynamic generated <code class="m-b183c0a2 mantine-Code-root" dir="ltr">&lt;style /&gt;</code> tags.</p>
 <div id="cssvariablesresolver" data-heading="cssVariablesResolver" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#cssvariablesresolver">cssVariablesResolver</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> is a function to generate CSS variables styles based on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme object</a>.
-You can learn more about Mantine CSS variables in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables#css-variables-resolver">CSS variables guide</a>.</p>
-<div id="mantinethemeprovider" data-heading="MantineThemeProvider" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#mantinethemeprovider">MantineThemeProvider</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code> allows overriding <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object">theme</a> values for a subtree of components.
-Note that values that are used to generate <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables">CSS variables</a> cannot be overridden with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code>.
-For example, you cannot use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code> to override <code class="m-b183c0a2 mantine-Code-root" dir="ltr">colors</code> or <code class="m-b183c0a2 mantine-Code-root" dir="ltr">fontSizes</code>.</p>
-<div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Default button</span></span></button><button class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Inside MantineThemeProvider</span></span></button></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineThemeProvider</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Group</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
-
-<span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
-  <span class="hljs-keyword">return</span> (
-    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">MantineThemeProvider</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">Group</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>&gt;</span>Default button<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;<span class="hljs-name">MantineThemeProvider</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">primaryColor:</span> &#x27;<span class="hljs-attr">red</span>&#x27; }}&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">Button</span>&gt;</span>Inside MantineThemeProvider<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">MantineThemeProvider</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">Group</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">MantineThemeProvider</span>&gt;</span></span>
-  );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
-<blockquote style="--bq-bg-light:rgba(34, 139, 230, 0.07);--bq-bg-dark:rgba(25, 113, 194, 0.06);--bq-bd:var(--mantine-color-blue-filled);--bq-icon-size:calc(3rem * var(--mantine-scale));--bq-radius:var(--mantine-radius-md);--docs-bq-code-bg-light:rgba(34, 139, 230, 0.2);--docs-bq-code-bg-dark:rgba(77, 171, 247, 0.2)" class="MdxInfo_root__tgwdu m-ddec01c0 mantine-Blockquote-root" radius="md"><span class="m-dde7bd57 mantine-Blockquote-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="MdxInfo_icon__uA1Pv"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span>
-<p class="MdxTypography_paragraph__Lp7wh"><strong>Difference between MantineProvider and MantineThemeProvider</strong></p>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> is used for:</p>
-<ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx">Color scheme management</li>
-<li class="MdxTypography_li__JpNrx">CSS variables generation</li>
-<li class="MdxTypography_li__JpNrx">Providing theme context</li>
-</ul>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code> is only used to change theme context – it does not generate CSS variables or manage color scheme.</p>
-<p class="MdxTypography_paragraph__Lp7wh">It is not recommended to have more than one <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineProvider</code> in your application, but you can have as many <code class="m-b183c0a2 mantine-Code-root" dir="ltr">MantineThemeProvider</code> as you need.</p>
-</blockquote><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/theme-object"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Theme object</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/mantine-provider","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">cssVariablesResolver</code> is a function to generate CSS variables styles based on the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/theme-object/">theme object</a>.
+You can learn more about Mantine CSS variables in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/css-variables/#css-variables-resolver">CSS variables guide</a>.</p><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/theme-object/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Theme object</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/mantine-provider","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/theme-object.html b/theming/theme-object/index.html
similarity index 80%
rename from theming/theme-object.html
rename to theming/theme-object/index.html
index 9c21f77aece..49d483b8bd5 100644
--- a/theming/theme-object.html
+++ b/theming/theme-object/index.html
@@ -3,7 +3,7 @@
   var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme);
 } catch (e) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/theme-object-0376ae404aaa70a5.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Theme object</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/theme-object-0376ae404aaa70a5.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Theme object</h1>
 <p class="MdxTypography_paragraph__Lp7wh">Mantine theme is an object where your application&#x27;s colors, fonts, spacing, border-radius and other design tokens are stored.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">MantineTheme</span> {
   <span class="hljs-comment">/** Controls focus ring styles. Supports the following options:
@@ -123,7 +123,7 @@
   <span class="hljs-attr">other</span>: <span class="hljs-title class_">MantineThemeOther</span>;
 }</code></pre></div></div></div></div>
 <div id="usage" data-heading="Usage" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#usage">Usage</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To customize theme, pass theme override object to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> prop.
+<p class="MdxTypography_paragraph__Lp7wh">To customize theme, pass theme override object to <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme</code> prop.
 Theme override will be deeply merged with the default theme.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -165,7 +165,7 @@
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><p class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Focus ring: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">auto</code></p><div style="margin-top:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 1</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 2</span></span></button></div><p style="margin-top:var(--mantine-spacing-lg)" class="mantine-focus-always m-b6d8b162 mantine-Text-root">Focus ring: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">always</code></p><div style="margin-top:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-always mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 1</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-always mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 2</span></span></button></div><p style="margin-top:var(--mantine-spacing-lg)" class="mantine-focus-never m-b6d8b162 mantine-Text-root">Focus ring: <code class="m-b183c0a2 mantine-Code-root" dir="ltr">never</code></p><div style="margin-top:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-never mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 1</span></span></button><button style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs)" class="mantine-focus-never mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-size="xs" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button 2</span></span></button></div></div></div></div>
 <div id="focusclassname" data-heading="focusClassName" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#focusclassname">focusClassName</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusClassName</code> is a CSS class that is added to elements that have focus styles, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusClassName</code> is a CSS class that is added to elements that have focus styles, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>.
 It can be used to customize focus ring styles of all interactive components except inputs. Note that when <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusClassName</code> is set, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.focusRing</code> is ignored.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="m-f1cdba19 mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Click button to see custom focus ring</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>focus.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./focus.module.css&#x27;</span>;
@@ -184,7 +184,7 @@
 or provide a <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#providing_a_focus_fallback">fallback</a> with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">:focus</code> pseudo-class.</p>
 </blockquote>
 <div id="activeclassname" data-heading="activeClassName" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#activeclassname">activeClassName</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.activeClassName</code> is a CSS class that is added to elements that have active styles, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.activeClassName</code> is a CSS class that is added to elements that have active styles, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>.
 It can be used to customize active styles of all interactive components.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button class="mantine-focus-auto m-32801db9 m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Press me to see active styles</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>active.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./active.module.css&#x27;</span>;
@@ -207,10 +207,10 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="defaultradius" data-heading="defaultRadius" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#defaultradius">defaultRadius</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultRadius</code> controls the default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">border-radius</code> property in most components, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input">TextInput</a>.
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultRadius</code> controls the default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">border-radius</code> property in most components, for example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a> or <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text-input/">TextInput</a>.
 You can set to either one of the values from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.radius</code> or a number/string to use exact value. Note that numbers are treated as pixels, but
 converted to rem. For example, <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultRadius: 4</code> will be converted to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">0.25rem</code>.
-You can learn more about rem conversion in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem">rem units guide</a>.</p>
+You can learn more about rem conversion in the <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/rem/">rem units guide</a>.</p>
 <div class="m-761fa02a"><div class="m-df4e856a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><button style="--button-radius:var(--mantine-radius-sm)" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-block="true" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button with defaultRadius</span></span></button><div style="margin-top:var(--mantine-spacing-sm)" class="m-46b77525 mantine-InputWrapper-root mantine-TextInput-root"><label class="m-8fdc1311 mantine-InputWrapper-label mantine-TextInput-label" for="mantine-R5allbblu6" id="mantine-R5allbblu6-label">TextInput with defaultRadius</label><div style="--input-radius:var(--mantine-radius-sm)" class="m-6c018570 mantine-Input-wrapper mantine-TextInput-wrapper" data-variant="default"><input class="m-8fb7ebe7 mantine-Input-input mantine-TextInput-input" data-variant="default" placeholder="TextInput with default radius" aria-invalid="false" id="mantine-R5allbblu6"/></div></div></div></div><div class="m-de00ac9"><div style="--stack-gap:var(--mantine-spacing-sm)" class="m-b14e0e0b m-6d731127 mantine-Stack-root"><div class="m-46b77525 mantine-InputWrapper-root" type="size"><div class="m-8fdc1311 mantine-InputWrapper-label" id="mantine-Rdkllbblu6-label">Default radius</div><div style="--slider-radius:var(--mantine-radius-xl);--slider-thumb-size:calc(var(--slider-size) * 2)" class="m-dd36362e mantine-Slider-root" tabindex="-1"><div class="m-a8645c2 mantine-Slider-trackContainer"><div class="m-c9ade57f mantine-Slider-track"><div style="--slider-bar-width:calc(25% + var(--slider-size));--slider-bar-offset:calc(0% - var(--slider-size))" class="m-38aeed47 mantine-Slider-bar"></div><div style="--slider-thumb-offset:25%" class="mantine-focus-auto m-c9a9a60a mantine-Slider-thumb" tabindex="0" role="slider" aria-label="Size" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div><div><div style="--mark-offset:0%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xs</div></div><div style="--mark-offset:25%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark" data-filled="true"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">sm</div></div><div style="--mark-offset:50%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">md</div></div><div style="--mark-offset:75%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">lg</div></div><div style="--mark-offset:100%" class="m-b7b0423a mantine-Slider-markWrapper"><div class="m-dd33bc19 mantine-Slider-mark"></div><div class="m-68c77a5b mantine-Slider-markLabel" style="display:none">xl</div></div></div></div></div><input type="hidden" value="25"/></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, <span class="hljs-title class_">TextInput</span>, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -223,7 +223,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="cursortype" data-heading="cursorType" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#cursortype">cursorType</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.cursorType</code> controls the default cursor type for interactive elements,
-that do not have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">cursor: pointer</code> styles by default. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/checkbox">Checkbox</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select">NativeSelect</a>.</p>
+that do not have <code class="m-b183c0a2 mantine-Code-root" dir="ltr">cursor: pointer</code> styles by default. For example, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/checkbox/">Checkbox</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/native-select/">NativeSelect</a>.</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><div class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-Rqmdbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"><label class="m-8ee546b8 mantine-Checkbox-label" for="mantine-Rqmdbblu6">Default cursor</label></div></div></div><div style="margin-top:var(--mantine-spacing-md)" class="m-bf2d988c mantine-Checkbox-root m-5f75b09e mantine-Checkbox-root" data-label-position="right"><div class="m-5f6e695e mantine-Checkbox-body"><div class="m-26062bec mantine-Checkbox-inner" data-label-position="right"><input style="cursor:pointer" class="mantine-focus-auto m-26063560 mantine-Checkbox-input" id="mantine-R1amdbblu6" type="checkbox"/><svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="m-bf295423 mantine-Checkbox-icon"><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" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="m-d3ea56bb mantine-Checkbox-labelWrapper"><label class="m-8ee546b8 mantine-Checkbox-label" style="cursor:pointer" for="mantine-R1amdbblu6">Pointer cursor</label></div></div></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">Checkbox</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -243,7 +243,7 @@
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="defaultgradient" data-heading="defaultGradient" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#defaultgradient">defaultGradient</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.defaultGradient</code> controls the default gradient configuration for components that support <code class="m-b183c0a2 mantine-Code-root" dir="ltr">variant=&quot;gradient&quot;</code>
-(<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge">Badge</a>, etc.).</p>
+(<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/button/">Button</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/action-icon/">ActionIcon</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/badge/">Badge</a>, etc.).</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><button style="--button-bg:linear-gradient(45deg, var(--mantine-color-orange-filled) 0%, var(--mantine-color-red-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-orange-filled) 0%, var(--mantine-color-red-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-variant="gradient" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Button with custom default gradient</span></span></button></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, createTheme, <span class="hljs-title class_">Button</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">createTheme</span>({
@@ -262,8 +262,8 @@
   );
 }</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div>
 <div id="components" data-heading="components" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#components">components</a></h3>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.components</code> allows to override components <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> and styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> properties.
-You can learn more about these features in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props">default props</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> guides.</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.components</code> allows to override components <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> and styles with <code class="m-b183c0a2 mantine-Code-root" dir="ltr">classNames</code> and <code class="m-b183c0a2 mantine-Code-root" dir="ltr">styles</code> properties.
+You can learn more about these features in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-props/">default props</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> guides.</p>
 <div id="other" data-heading="other" data-order="3" class="MdxTitle_offset__M8MqD"></div><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="3"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#other">other</a></h3>
 <p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.other</code> is an object that can be used to store any other properties that you want to access with the theme objects.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
@@ -327,7 +327,7 @@
   );
 }</code></pre></div></div></div></div>
 <div id="use-mantine-theme-hook" data-heading="use-mantine-theme hook" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#use-mantine-theme-hook">use-mantine-theme hook</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">useMantineTheme</code> hook returns theme object from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a> context:</p>
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">useMantineTheme</code> hook returns theme object from <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a> context:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { useMantineTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
 <span class="hljs-keyword">function</span> <span class="hljs-title function_">Demo</span>(<span class="hljs-params"></span>) {
@@ -337,9 +337,9 @@
 <div id="default-theme" data-heading="Default theme" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#default-theme">Default theme</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can import default theme object from <code class="m-b183c0a2 mantine-Code-root" dir="ltr">@mantine/core</code> package. It includes
 all theme properties with default values. When you pass theme override to
-<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider">MantineProvider</a>, it will be deeply merged with
+<a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/mantine-provider/">MantineProvider</a>, it will be deeply merged with
 the default theme. You can find contents of <code class="m-b183c0a2 mantine-Code-root" dir="ltr">DEFAULT_THEME</code> object
-on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-theme">this page</a>.</p>
+on <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/theming/default-theme/">this page</a>.</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">DEFAULT_THEME</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;</code></pre></div></div></div></div>
 <div id="access-theme-outside-of-components" data-heading="Access theme outside of components" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#access-theme-outside-of-components">Access theme outside of components</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">To access theme outside of components, you need to create a full theme object
@@ -354,4 +354,4 @@
 
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> theme = <span class="hljs-title function_">mergeMantineTheme</span>(<span class="hljs-variable constant_">DEFAULT_THEME</span>, themeOverride);</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">Then your will be able to import it anywhere in your application:</p>
-<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { theme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./theme.ts&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/mantine-provider"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MantineProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/colors"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Colors</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/theme-object","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+<div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { theme } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./theme.ts&#x27;</span>;</code></pre></div></div></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/mantine-provider/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">MantineProvider</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/colors/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Colors</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/theme-object","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
diff --git a/theming/typography.html b/theming/typography/index.html
similarity index 73%
rename from theming/typography.html
rename to theming/typography/index.html
index ca1c09ad0fa..797ad778739 100644
--- a/theming/typography.html
+++ b/theming/typography/index.html
@@ -3,13 +3,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) {}
-</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-6b495e28bfbaa813.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-a1599e086a440f9c.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/typography-2397911cfc5ad29c.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_buildManifest.js" defer=""></script><script src="/_next/static/LJ8UVT2kYhT20r4LyREri/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/typography">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Typography</h1>
+</script><link rel="preload" href="/_next/static/media/e0ad2ceaf794b823-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/fe465dc4c64aad70-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e9031b4995577271.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e9031b4995577271.css" data-n-g=""/><link rel="preload" href="/_next/static/css/38da4a8345682411.css" as="style"/><link rel="stylesheet" href="/_next/static/css/38da4a8345682411.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-cfda9816f32e4633.js" defer=""></script><script src="/_next/static/chunks/framework-ce84985cd166733a.js" defer=""></script><script src="/_next/static/chunks/main-da49d387d19ca122.js" defer=""></script><script src="/_next/static/chunks/pages/_app-ca67f5d789d7a43a.js" defer=""></script><script src="/_next/static/chunks/1300-7220bd7f6a9c82f6.js" defer=""></script><script src="/_next/static/chunks/178-67b6774636d9bfd4.js" defer=""></script><script src="/_next/static/chunks/pages/theming/typography-2397911cfc5ad29c.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_buildManifest.js" defer=""></script><script src="/_next/static/1QUz3aLATlGHLVg4CdVbm/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-mantine-styles="true">:root{--mantine-font-family-monospace: Menlo, Monaco, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-color-ocean-blue-0: #7AD1DD;--mantine-color-ocean-blue-1: #5FCCDB;--mantine-color-ocean-blue-2: #44CADC;--mantine-color-ocean-blue-3: #2AC9DE;--mantine-color-ocean-blue-4: #1AC2D9;--mantine-color-ocean-blue-5: #11B7CD;--mantine-color-ocean-blue-6: #09ADC3;--mantine-color-ocean-blue-7: #0E99AC;--mantine-color-ocean-blue-8: #128797;--mantine-color-ocean-blue-9: #147885;--mantine-color-bright-pink-0: #F0BBDD;--mantine-color-bright-pink-1: #ED9BCF;--mantine-color-bright-pink-2: #EC7CC3;--mantine-color-bright-pink-3: #ED5DB8;--mantine-color-bright-pink-4: #F13EAF;--mantine-color-bright-pink-5: #F71FA7;--mantine-color-bright-pink-6: #FF00A1;--mantine-color-bright-pink-7: #E00890;--mantine-color-bright-pink-8: #C50E82;--mantine-color-bright-pink-9: #AD1374;}:root[data-mantine-color-scheme="dark"]{--mantine-color-ocean-blue-filled: #128797;--mantine-color-ocean-blue-filled-hover: #147885;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.15);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.2);--mantine-color-ocean-blue-light-color: #2AC9DE;--mantine-color-ocean-blue-outline: #1AC2D9;--mantine-color-ocean-blue-outline-hover: rgba(26, 194, 217, 0.05);--mantine-color-bright-pink-filled: #C50E82;--mantine-color-bright-pink-filled-hover: #AD1374;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.15);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.2);--mantine-color-bright-pink-light-color: #ED5DB8;--mantine-color-bright-pink-outline: #F13EAF;--mantine-color-bright-pink-outline-hover: rgba(241, 62, 175, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-ocean-blue-filled: #09ADC3;--mantine-color-ocean-blue-filled-hover: #0E99AC;--mantine-color-ocean-blue-light: rgba(9, 173, 195, 0.1);--mantine-color-ocean-blue-light-hover: rgba(9, 173, 195, 0.12);--mantine-color-ocean-blue-light-color: #09ADC3;--mantine-color-ocean-blue-outline: #09ADC3;--mantine-color-ocean-blue-outline-hover: rgba(9, 173, 195, 0.05);--mantine-color-bright-pink-filled: #FF00A1;--mantine-color-bright-pink-filled-hover: #E00890;--mantine-color-bright-pink-light: rgba(255, 0, 161, 0.1);--mantine-color-bright-pink-light-hover: rgba(255, 0, 161, 0.12);--mantine-color-bright-pink-light-color: #FF00A1;--mantine-color-bright-pink-outline: #FF00A1;--mantine-color-bright-pink-outline-hover: rgba(255, 0, 161, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><header class="Header_header__RVnmo width-before-scroll-bar" data-desktop="true"><div class="Header_logo__6eO61"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><button class="mantine-focus-auto m-87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-R4llu6-dropdown" id="mantine-R4llu6-target"><code style="font-weight:bold" class="Header_version__TvT8f m-b183c0a2 mantine-Code-root" dir="ltr"><span>7.0.0</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="Header_versionChevron__Gigx9"><path d="M6 9l6 6l6 -6"></path></svg></code></button></div><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-6e98493a m-87cf2631 mantine-UnstyledButton-root" type="button"><div style="--group-gap:var(--mantine-spacing-xs)" class="m-4081bf90 mantine-Group-root"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(0.9375rem * var(--mantine-scale));height:calc(0.9375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><p style="padding-right:calc(5rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m-b6d8b162 mantine-Text-root">Search</p><p style="font-weight:700" class="mantine-focus-auto m-602cb89e m-b6d8b162 mantine-Text-root">Ctrl + K</p></div></button><a class="mantine-focus-auto m-18a11a80 m-19df8210 m-87cf2631 mantine-UnstyledButton-root" aria-label="Discord" href="https://discord.gg/wbH82zuWMN"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1.25rem * var(--mantine-scale));height:calc(1.25rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></a><a class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" aria-label="Source code" href="https://github.com/mantinedev/mantine"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="RTL direction"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-text-direction-rtl" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5"></path><path d="M14 15v-11"></path><path d="M10 15v-11"></path><path d="M5 19h14"></path><path d="M7 21l-2 -2l2 -2"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></header><header class="Header_header__RVnmo width-before-scroll-bar" data-mobile="true"><div style="--group-justify:space-between;--group-wrap:nowrap;width:100%" class="m-4081bf90 mantine-Group-root"><div style="min-width:calc(5rem * var(--mantine-scale))" class=""><button style="--burger-size:var(--burger-size-sm)" class="mantine-focus-auto m-fea6bf1a mantine-Burger-root m-87cf2631 mantine-UnstyledButton-root" data-size="sm" type="button" aria-label="Toggle navbar"><div class="m-d4fb9cad mantine-Burger-burger" data-reduce-motion="true"></div></button></div><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><div style="--group-gap:var(--mantine-spacing-sm)" class="m-4081bf90 mantine-Group-root"><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="mantine-focus-auto m-18a11a80 m-87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-f4e3c6be"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="m-83c3d5d1 m-83c188ce"><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"></path></svg></button></div></div></header><nav class="Navbar_navbar__IDc_6" data-hidden="true"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="Navbar_scrollarea__lU_yb m-d57069b5 mantine-ScrollArea-root"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="Navbar_body__3EtQS"><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/getting-started/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-compass" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 3l0 2"></path><path d="M12 19l0 2"></path><path d="M3 12l2 0"></path><path d="M19 12l2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Getting started</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/about/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">About Mantine</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/overview/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-api" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><path d="M4 13h5"></path><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3"></path><path d="M20 8v8"></path><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"></path></svg></span><span class="NavbarMainLink_label__JCKSa">API Overview</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/contribute/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-heart-handshake" style="width:calc(1.5625rem * var(--mantine-scale));height:calc(1.5625rem * var(--mantine-scale))"><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"></path><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"></path><path d="M12.5 15.5l2 2"></path><path d="M15 13l2 2"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Contribute</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="/colors-generator/"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-palette" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><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"></path><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Colors generator</span></a><a class="mantine-focus-auto NavbarMainLink_link__DyChl m-87cf2631 mantine-UnstyledButton-root" href="https://ui.mantine.dev" target="_blank"><span class="NavbarMainLink_icon__MBvlD"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-mantine" style="width:calc(1.375rem * var(--mantine-scale));height:calc(1.375rem * var(--mantine-scale))"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4"></path><path d="M14 9h-2"></path><path d="M14 15h-2"></path><path d="M10 12h.01"></path></svg></span><span class="NavbarMainLink_label__JCKSa">Mantine UI</span></a><div class="Navbar_groups__qiAKs"><div class="NavbarLinksGroup_group__JmCQM" data-opened="true"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">theming</p></button><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/mantine-provider/">MantineProvider</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/theme-object/">Theme object</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/colors/">Colors</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/color-schemes/">Color schemes</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" data-active="true" href="/theming/typography/">Typography</a><a class="mantine-focus-auto NavbarLinksGroup_link__1z_lj m-87cf2631 mantine-UnstyledButton-root" href="/theming/default-props/">Default props</a></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">styles</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">guides</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine hooks</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine form</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine core</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">mantine dates</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">other packages</p></button></div><div class="NavbarLinksGroup_group__JmCQM"><button class="mantine-focus-auto NavbarLinksGroup_header__n3Wm9 m-87cf2631 mantine-UnstyledButton-root" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="NavbarLinksGroup_chevron__ncZb1" data-collapsed="true"><path d="M6 9l6 6l6 -6"></path></svg><p class="mantine-focus-auto NavbarLinksGroup_title__acA1m m-b6d8b162 mantine-Text-root">changelog</p></button></div></div></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div></nav><main class="Shell_main__lcVaI" id="mdx"><div class="PageBase_content__4g1iM"><div class="MdxRawContent_wrapper__raitV"><div class="MdxRawContent_container__8ErcN"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="1" data-h1="true">Typography</h1>
 <div id="change-fonts" data-heading="Change fonts" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#change-fonts">Change fonts</a></h2>
 <p class="MdxTypography_paragraph__Lp7wh">You can change fonts and other text styles for headings, code and all other components with the following theme properties:</p>
 <ul class="MdxTypography_ul__pQ83b">
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamily</code> – controls font-family in all components except <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title">Title</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/code">Code</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/kbd">Kbd</a></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamilyMonospace</code> – controls font-family of components that require monospace font: <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/code">Code</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/kbd">Kbd</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/code-highlight">CodeHighlight</a></li>
-<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.headings.fontFamily</code> – controls font-family of h1-h6 tags in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title">Title</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider">TypographyStylesProvider</a> components, fallbacks to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamily</code> if not defined</li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamily</code> – controls font-family in all components except <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title/">Title</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/code/">Code</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/kbd/">Kbd</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamilyMonospace</code> – controls font-family of components that require monospace font: <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/code/">Code</a>, <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/kbd/">Kbd</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/others/code-highlight/">CodeHighlight</a></li>
+<li class="MdxTypography_li__JpNrx"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.headings.fontFamily</code> – controls font-family of h1-h6 tags in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title/">Title</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider/">TypographyStylesProvider</a> components, fallbacks to <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontFamily</code> if not defined</li>
 </ul>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true" data-centered="true"><div class="m-ad8eb9d6"><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size);font-family:Greycliff CF, sans-serif;text-align:center" class="m-8a5d1357 mantine-Title-root" data-order="3">Greycliff CF title</h3><div style="margin-top:var(--mantine-spacing-md)" class="m-4081bf90 mantine-Group-root"><button style="font-family:Verdana, sans-serif" class="mantine-focus-auto mantine-active m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-80f1301b mantine-Button-inner"><span class="m-811560b9 mantine-Button-label">Verdana button</span></span></button><code style="font-family:Monaco, Courier, monospace" class="m-b183c0a2 mantine-Code-root" dir="ltr">Monaco, Courier Code</code></div></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Code</span>, <span class="hljs-title class_">Title</span>, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -77,7 +77,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.fontSizes</code> values:</p>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Key</th><th class="m-4e7aa4f3 mantine-Table-th">Value</th><th class="m-4e7aa4f3 mantine-Table-th">Value in px</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xs</td><td class="m-4e7aa4ef mantine-Table-td">0.75rem</td><td class="m-4e7aa4ef mantine-Table-td">12px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">sm</td><td class="m-4e7aa4ef mantine-Table-td">0.875rem</td><td class="m-4e7aa4ef mantine-Table-td">14px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">md</td><td class="m-4e7aa4ef mantine-Table-td">1rem</td><td class="m-4e7aa4ef mantine-Table-td">16px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">lg</td><td class="m-4e7aa4ef mantine-Table-td">1.125rem</td><td class="m-4e7aa4ef mantine-Table-td">18px</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xl</td><td class="m-4e7aa4ef mantine-Table-td">1.25rem</td><td class="m-4e7aa4ef mantine-Table-td">20px</td></tr></tbody></table></div></div></div>
 <div id="line-heights" data-heading="Line heights" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#line-heights">Line heights</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> property defines line-height values for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text">Text</a> component,
+<p class="MdxTypography_paragraph__Lp7wh"><code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> property defines line-height values for <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/text/">Text</a> component,
 most other components use <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights.md</code> by default:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -101,7 +101,7 @@
 <p class="MdxTypography_paragraph__Lp7wh">Default <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.lineHeights</code> values:</p>
 <div class="DocsSection_section__eaFZM"><div style="overflow-x:auto"><div style="min-width:calc(25rem * var(--mantine-scale))"><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m-b23fa0ef mantine-Table-table"><thead class="mantine-Table-thead"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><th class="m-4e7aa4f3 mantine-Table-th">Key</th><th class="m-4e7aa4f3 mantine-Table-th">Value</th></tr></thead><tbody class="m-b2404537 mantine-Table-tbody"><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xs</td><td class="m-4e7aa4ef mantine-Table-td">1.4</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">sm</td><td class="m-4e7aa4ef mantine-Table-td">1.45</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">md</td><td class="m-4e7aa4ef mantine-Table-td">1.55</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">lg</td><td class="m-4e7aa4ef mantine-Table-td">1.6</td></tr><tr class="m-4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m-4e7aa4ef mantine-Table-td">xl</td><td class="m-4e7aa4ef mantine-Table-td">1.65</td></tr></tbody></table></div></div></div>
 <div id="h1-h6-styles" data-heading="h1-h6 styles" data-order="2" class="MdxTitle_offset__M8MqD"></div><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="MdxTitle_title__84bQC m-8a5d1357 mantine-Title-root" data-order="2"><a class="MdxTitle_link__crQ2W mantine-focus-auto" href="#h1-h6-styles">h1-h6 styles</a></h2>
-<p class="MdxTypography_paragraph__Lp7wh">To customize headings styles in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title">Title</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider">TypographyStylesProvider</a> components
+<p class="MdxTypography_paragraph__Lp7wh">To customize headings styles in <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/title/">Title</a> and <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/core/typography-styles-provider/">TypographyStylesProvider</a> components
 set <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.headings</code>:</p>
 <div class="MdxPre_code__nDwNZ m-5cb1b9c8 m-1f5e827e mantine-CodeHighlight-root" dir="ltr"><button class="mantine-focus-auto mantine-active m-5caae85b mantine-CodeHighlight-copy m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><pre class="m-2c47c4fd mantine-CodeHighlight-pre"><code class="m-5caae6d3 mantine-CodeHighlight-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">MantineProvider</span>, rem } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 
@@ -130,7 +130,7 @@
 }</code></pre></div></div></div></div>
 <p class="MdxTypography_paragraph__Lp7wh">With <code class="m-b183c0a2 mantine-Code-root" dir="ltr">theme.headings</code> you can customize font-size, font-weight and line-height per heading level.
 If you need more control over styles, use <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is">:is selector</a>
-with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api">Styles API</a> to target specific heading level:</p>
+with <a class="mantine-focus-auto m-849cf0da MdxLink_link__XuLGf m-b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/styles/styles-api/">Styles API</a> to target specific heading level:</p>
 <div class="m-761fa02a"><div class="m-a3c6e060" data-with-padding="true"><div class="m-ad8eb9d6"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="1">Heading 1</h1><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="2">Heading 2</h2><h3 style="--title-fw:var(--mantine-h3-font-weight);--title-lh:var(--mantine-h3-line-height);--title-fz:var(--mantine-h3-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="3">Heading 3</h3><h4 style="--title-fw:var(--mantine-h4-font-weight);--title-lh:var(--mantine-h4-line-height);--title-fz:var(--mantine-h4-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="4">Heading 4</h4><h5 style="--title-fw:var(--mantine-h5-font-weight);--title-lh:var(--mantine-h5-line-height);--title-fz:var(--mantine-h5-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="5">Heading 5</h5><h6 style="--title-fw:var(--mantine-h6-font-weight);--title-lh:var(--mantine-h6-line-height);--title-fz:var(--mantine-h6-font-size)" class="m-9cc5ffb6 m-8a5d1357 mantine-Title-root" data-order="6">Heading 6</h6></div></div><div style="--ch-max-collapsed-height:calc(8rem * var(--mantine-scale))" class="m-66990f0a m-5cb1b9c8 m-1f5e827e mantine-CodeHighlightTabs-root" dir="ltr"><div class="m-e58679f3 mantine-CodeHighlightTabs-header"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#1976d2" d="M6 6h36v36H6z"></path><path fill="#fff" d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"></path></svg></span><span>Demo.tsx</span></button><button class="mantine-focus-auto m-5cac2e62 mantine-CodeHighlightTabs-file m-87cf2631 mantine-UnstyledButton-root" type="button"><span class="m-b46cddfb mantine-CodeHighlightTabs-fileIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))"><path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z"></path><path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z"></path><path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"></path><path fill="#EEE" d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"></path></svg></span><span>Demo.module.css</span></button></div></div></div><div data-orientation="horizontal" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px"></div><div class="m-c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><div class="m-be7e9c9c mantine-CodeHighlightTabs-controls"><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Collapse code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 13v-8l-3 3m6 0l-3 -3"></path><path d="M9 17l1 0"></path><path d="M14 17l1 0"></path><path d="M19 17l1 0"></path><path d="M4 17l1 0"></path></svg></button><button class="mantine-focus-auto mantine-active m-d498bab7 mantine-CodeHighlightTabs-control m-8d3f4000 mantine-ActionIcon-root m-87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" style="width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></button></div></div><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m-d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m-c0783ff9 mantine-ScrollArea-viewport"><div style="min-width:100%;display:table"><div class="m-9f507240 mantine-CodeHighlightTabs-codeWrapper" data-expanded="true"><pre class="m-2c47c4fd mantine-CodeHighlightTabs-pre"><code class="m-5caae6d3 mantine-CodeHighlightTabs-code"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Title</span>, <span class="hljs-title class_">MantineProvider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@mantine/core&#x27;</span>;
 <span class="hljs-keyword">import</span> classes <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./Demo.module.css&#x27;</span>;
 
@@ -155,4 +155,4 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">Title</span> <span class="hljs-attr">order</span>=<span class="hljs-string">{6}</span>&gt;</span>Heading 6<span class="hljs-tag">&lt;/<span class="hljs-name">Title</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">MantineProvider</span>&gt;</span></span>
   );
-}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/color-schemes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color schemes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/default-props"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Default props</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/contributing">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/about">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/pages/changelog">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/typography","query":{},"buildId":"LJ8UVT2kYhT20r4LyREri","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file
+}</code></pre></div></div></div><div data-orientation="horizontal" data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" style="position:absolute;--sa-thumb-width:18px"></div><div data-state="hidden" class="m-c44ba933 mantine-ScrollArea-scrollbar" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px"></div></div><button class="mantine-focus-auto m-c9378bc2 mantine-CodeHighlightTabs-showCodeButton m-87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div class="MdxSiblings_root__FJku_"><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/color-schemes/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M5 12l6 6"></path><path d="M5 12l6 -6"></path></svg><div class="MdxSiblings_body__99U87" data-prev="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Previous</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Color schemes</p></div></a><a class="MdxSiblings_link__CQ08F mantine-focus-auto" href="/theming/default-props/"><div class="MdxSiblings_body__99U87" data-next="true"><p class="mantine-focus-auto MdxSiblings_title__x_gaR m-b6d8b162 mantine-Text-root">Next</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto MdxSiblings_description__c4IYo m-b6d8b162 mantine-Text-root">Default props</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="MdxSiblings_icon__MaHsb"><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg></a></div></div><div class="MdxRawContent_tableOfContents__Sonn3"></div></div></div><div class="Footer_root__bgmye"><div class="Footer_spacer__g_thI"></div><div class="Footer_wrapper__chorF width-before-scroll-bar" data-with-navbar="true"><div style="--container-size:calc(68.75rem * var(--mantine-scale))" class="m-7485cace mantine-Container-root"><div class="Footer_inner__Oczlu"><div class="Footer_logoSection__VUxg4"><a class="Logo_logo__0605V mantine-focus-auto" aria-label="Mantine" href="/"><span class="m-515a97f8 mantine-VisuallyHidden-root">Welcome to Mantine, React components library that you always wished for</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 163" style="height:calc(1.875rem * var(--mantine-scale))" class="m-2075ec07"><g fill="none" fill-rule="evenodd"><path fill="#339af0" fill-rule="nonzero" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"></path><g fill="#fff"><path fill-rule="nonzero" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"></path><path d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"></path></g><path fill="currentColor" fill-rule="nonzero" d="M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"></path></g></svg></a><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto Footer_description__b7YOg m-b6d8b162 mantine-Text-root">Build fully functional accessible web applications faster than ever</p></div><div class="Footer_groups__nLTK6"><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">About</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/contribute/">Contribute</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/about/">About Mantine</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="/changelog/previous-versions/">Changelog</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/releases">Releases</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Community</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://discord.gg/wbH82zuWMN">Chat on Discord</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://twitter.com/mantinedev">Follow on Twitter</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/rtivital">Follow on Github</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev/mantine/discussions">GitHub discussions</a></div><div class="LinksGroup_wrapper__54pi4"><p class="mantine-focus-auto LinksGroup_title__maicr m-b6d8b162 mantine-Text-root">Project</p><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://ui.mantine.dev/">Mantine UI</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://mantine.dev">Documentation</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://github.com/mantinedev">Github organization</a><a class="mantine-focus-auto LinksGroup_link__cg684 m-b6d8b162 mantine-Text-root" href="https://www.npmjs.com/org/mantine">npm organization</a></div></div></div><div class="Footer_afterFooter__FyXNP"><div style="--group-justify:space-between;--group-wrap:wrap" class="m-4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto Footer_afterFooterNote__9yART m-b6d8b162 mantine-Text-root">Built by <a href="https://github.com/rtivital">Vitaly Rtishchev</a> and<!-- --> <a href="https://github.com/mantinedev/mantine/graphs/contributors">these awesome people</a></p><div class="Footer_social__0m1yX"><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-6611c750 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://discord.gg/wbH82zuWMN"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 199" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"></path></svg></span><span class="m-811560b9 mantine-Button-label">Join Discord community</span></span></a><a style="--button-radius:var(--mantine-radius-md)" class="mantine-focus-auto mantine-active m-fde4daed m-a568e357 Footer_socialButton__zLzIx m-77c9d27d mantine-Button-root m-87cf2631 mantine-UnstyledButton-root" data-with-left-section="true" target="_blank" rel="noopener noreferrer" href="https://twitter.com/mantinedev"><span class="m-80f1301b mantine-Button-inner"><span class="m-1df08738 m-a74036a mantine-Button-section" data-position="left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 209" fill="currentColor" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale))"><path fill-rule="nonzero" d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"></path></svg></span><span class="m-811560b9 mantine-Button-label">Follow Mantine on Twitter</span></span></a></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/theming/typography","query":{},"buildId":"1QUz3aLATlGHLVg4CdVbm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
\ No newline at end of file